From d004d19dd7b3751300dc1c109e3fe9e4c11b7d16 Mon Sep 17 00:00:00 2001 From: SamTV12345 <40429738+SamTV12345@users.noreply.github.com> Date: Sat, 23 Mar 2024 20:58:05 +0100 Subject: [PATCH] Added vitepress for documentation. (#6270) --- .github/workflows/build-and-deploy-docs.yml | 68 + doc/.gitignore | 2 + doc/.vitepress/config.mts | 74 ++ doc/.vitepress/theme/components/SvgImage.vue | 22 + doc/.vitepress/theme/index.ts | 12 + doc/.vitepress/theme/styles/vars.css | 77 ++ doc/api/changeset_library.md | 44 + doc/api/editbar.md | 28 + doc/api/editorInfo.md | 79 ++ doc/api/embed_parameters.md | 75 ++ doc/api/hooks_client-side.adoc | 38 +- doc/api/hooks_client-side.md | 527 ++++++++ doc/api/hooks_overview.md | 117 ++ doc/api/hooks_server-side.adoc | 12 +- doc/api/hooks_server-side.md | 1103 +++++++++++++++++ doc/api/http_api.md | 686 ++++++++++ doc/api/index.md | 3 + doc/api/pluginfw.md | 22 + doc/api/toolbar.md | 46 + doc/cookies.md | 18 + doc/demo.md | 19 + doc/docker.md | 257 ++++ doc/documentation.md | 15 + doc/index.md | 39 + doc/localization.md | 114 ++ doc/package.json | 10 + doc/plugins.md | 247 ++++ doc/{ => public}/easysync/README.md | 0 .../easysync/easysync-full-description.pdf | Bin .../easysync/easysync-full-description.tex | 0 doc/{ => public}/easysync/easysync-notes.pdf | Bin doc/{ => public}/easysync/easysync-notes.tex | 0 doc/{ => public}/easysync/easysync-notes.txt | 0 doc/{images => public}/etherpad_basic.png | Bin doc/{images => public}/etherpad_demo.gif | Bin .../etherpad_full_features.png | Bin .../etherpad_skin_variants.gif | Bin doc/public/favicon.ico | Bin 0 -> 130045 bytes doc/skins.md | 19 + doc/stats.md | 18 + package.json | 3 +- pnpm-lock.yaml | 554 ++++++++- pnpm-workspace.yaml | 1 + 43 files changed, 4322 insertions(+), 27 deletions(-) create mode 100644 .github/workflows/build-and-deploy-docs.yml create mode 100644 doc/.gitignore create mode 100644 doc/.vitepress/config.mts create mode 100644 doc/.vitepress/theme/components/SvgImage.vue create mode 100644 doc/.vitepress/theme/index.ts create mode 100644 doc/.vitepress/theme/styles/vars.css create mode 100644 doc/api/changeset_library.md create mode 100644 doc/api/editbar.md create mode 100644 doc/api/editorInfo.md create mode 100644 doc/api/embed_parameters.md create mode 100644 doc/api/hooks_client-side.md create mode 100644 doc/api/hooks_overview.md create mode 100644 doc/api/hooks_server-side.md create mode 100644 doc/api/http_api.md create mode 100644 doc/api/index.md create mode 100644 doc/api/pluginfw.md create mode 100644 doc/api/toolbar.md create mode 100644 doc/cookies.md create mode 100644 doc/demo.md create mode 100644 doc/docker.md create mode 100644 doc/documentation.md create mode 100644 doc/index.md create mode 100644 doc/localization.md create mode 100644 doc/package.json create mode 100644 doc/plugins.md rename doc/{ => public}/easysync/README.md (100%) rename doc/{ => public}/easysync/easysync-full-description.pdf (100%) rename doc/{ => public}/easysync/easysync-full-description.tex (100%) rename doc/{ => public}/easysync/easysync-notes.pdf (100%) rename doc/{ => public}/easysync/easysync-notes.tex (100%) rename doc/{ => public}/easysync/easysync-notes.txt (100%) rename doc/{images => public}/etherpad_basic.png (100%) rename doc/{images => public}/etherpad_demo.gif (100%) rename doc/{images => public}/etherpad_full_features.png (100%) rename doc/{images => public}/etherpad_skin_variants.gif (100%) create mode 100644 doc/public/favicon.ico create mode 100644 doc/skins.md create mode 100644 doc/stats.md diff --git a/.github/workflows/build-and-deploy-docs.yml b/.github/workflows/build-and-deploy-docs.yml new file mode 100644 index 000000000..5f3dde2b2 --- /dev/null +++ b/.github/workflows/build-and-deploy-docs.yml @@ -0,0 +1,68 @@ +# Workflow for deploying static content to GitHub Pages +name: Deploy Docs to GitHub Pages + +on: + # Runs on pushes targeting the default branch + push: + branches: ["develop"] + paths: + - doc/** # Only run workflow when changes are made to the doc directory + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: + +# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages +permissions: + contents: read + pages: write + id-token: write + packages: read + +# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. +# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. +concurrency: + group: "pages" + cancel-in-progress: false + +jobs: + # Single deploy job since we're just deploying + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v3 + - name: Setup Pages + uses: actions/configure-pages@v3 + - uses: pnpm/action-setup@v3 + name: Install pnpm + with: + version: 8 + run_install: false + - name: Get pnpm store directory + shell: bash + run: | + echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV + - uses: actions/cache@v4 + name: Setup pnpm cache + with: + path: ${{ env.STORE_PATH }} + key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} + restore-keys: | + ${{ runner.os }}-pnpm-store- + - name: Only install direct dependencies + run: pnpm config set auto-install-peers false + - name: Install dependencies + run: pnpm install + - name: Build app + working-directory: doc + run: pnpm run docs:build + - name: Upload artifact + uses: actions/upload-pages-artifact@v1 + with: + # Upload entire repository + path: './doc/.vitepress/dist' + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v2 diff --git a/doc/.gitignore b/doc/.gitignore new file mode 100644 index 000000000..4c6f9986d --- /dev/null +++ b/doc/.gitignore @@ -0,0 +1,2 @@ +.vitepress/cache +dist diff --git a/doc/.vitepress/config.mts b/doc/.vitepress/config.mts new file mode 100644 index 000000000..296e8c3ce --- /dev/null +++ b/doc/.vitepress/config.mts @@ -0,0 +1,74 @@ +import { defineConfig } from 'vitepress' +import {version} from '../../package.json' +// https://vitepress.dev/reference/site-config +const commitRef = process.env.COMMIT_REF?.slice(0, 8) || 'dev' + + +export default defineConfig({ + title: "Etherpad Documentation", + description: "Next Generation Collaborative Document Editing", + themeConfig: { + // https://vitepress.dev/reference/default-theme-config + nav: [ + { text: 'Home', link: '/' }, + { text: 'Getting started', link: '/docker.md' } + ], + logo:'/favicon.ico', + + sidebar: { + '/': [ + { + link: '/', + text: 'About', + items: [ + { text: 'Docker', link: '/docker.md' }, + { text: 'Localization', link: '/localization.md' }, + { text: 'Cookies', link: '/cookies.md' }, + { text: 'Plugins', link: '/plugins.md' }, + { text: 'Stats', link: '/stats.md' }, + {text: 'Skins', link: '/skins.md' }, + {text: 'Demo', link: '/demo.md' }, + ] + }, + { + text: 'API', + link: '/api/', + items: [ + { text: 'Changeset', link: '/api/changeset_library.md' }, + {text: 'Editbar', link: '/api/editbar.md' }, + {text: 'EditorInfo', link: '/api/editorInfo.md' }, + {text: 'Embed Parameters', link: '/api/embed_parameters.md' }, + {text: 'Hooks Client Side', link: '/api/hooks_client-side.md' }, + {text: 'Hooks Server Side', link: '/api/hooks_server-side.md' }, + {text: 'Plugins', link: '/api/pluginfw.md' }, + {text: 'Toolbar', link: '/api/toolbar.md' }, + {text: 'HTTP API', link: '/api/http_api.md' }, + ] + }, + { + text: 'Old Docs', + items: [ + { text: 'Easysync description', link: '/easysync/easysync-full-description.pdf' }, + { text: 'Easysync notes', link: '/easysync/easysync-notes.pdf' } + ] + } + ], + '/stats': [ + { + text: 'Stats', + items:[ + { text: 'Stats', link: '/stats/' } + ] + } + ] + }, + footer: { + message: `Published under Apache License`, + copyright: `(${commitRef}) v${version} by Etherpad Foundation` + }, + + socialLinks: [ + { icon: 'github', link: 'https://github.com/ether/etherpad-lite' } + ] + } +}) diff --git a/doc/.vitepress/theme/components/SvgImage.vue b/doc/.vitepress/theme/components/SvgImage.vue new file mode 100644 index 000000000..344098803 --- /dev/null +++ b/doc/.vitepress/theme/components/SvgImage.vue @@ -0,0 +1,22 @@ + + + + + diff --git a/doc/.vitepress/theme/index.ts b/doc/.vitepress/theme/index.ts new file mode 100644 index 000000000..b7c35ce47 --- /dev/null +++ b/doc/.vitepress/theme/index.ts @@ -0,0 +1,12 @@ +import { h } from 'vue' +import type { Theme } from 'vitepress' +import DefaultTheme from 'vitepress/theme' +import './styles/vars.css' +import SvgImage from './components/SvgImage.vue' + +export default { + extends: DefaultTheme, + enhanceApp({ app }) { + app.component('SvgImage', SvgImage) + }, +} satisfies Theme diff --git a/doc/.vitepress/theme/styles/vars.css b/doc/.vitepress/theme/styles/vars.css new file mode 100644 index 000000000..cc59c1443 --- /dev/null +++ b/doc/.vitepress/theme/styles/vars.css @@ -0,0 +1,77 @@ +/** + * Colors + * -------------------------------------------------------------------------- */ + +:root { + --vp-c-brand: #646cff; + --vp-c-brand-light: #747bff; + --vp-c-brand-lighter: #9499ff; + --vp-c-brand-lightest: #bcc0ff; + --vp-c-brand-dark: #535bf2; + --vp-c-brand-darker: #454ce1; + --vp-c-brand-dimm: rgba(100, 108, 255, 0.08); +} + +/** + * Component: Button + * -------------------------------------------------------------------------- */ + +:root { + --vp-button-brand-border: var(--vp-c-brand-light); + --vp-button-brand-text: var(--vp-c-white); + --vp-button-brand-bg: var(--vp-c-brand); + --vp-button-brand-hover-border: var(--vp-c-brand-light); + --vp-button-brand-hover-text: var(--vp-c-white); + --vp-button-brand-hover-bg: var(--vp-c-brand-light); + --vp-button-brand-active-border: var(--vp-c-brand-light); + --vp-button-brand-active-text: var(--vp-c-white); + --vp-button-brand-active-bg: var(--vp-button-brand-bg); +} + +/** + * Component: Home + * -------------------------------------------------------------------------- */ + +:root { + --vp-home-hero-name-color: transparent; + --vp-home-hero-name-background: -webkit-linear-gradient( + 120deg, + #0f775b 30%, + #0f775b + ); + + --vp-home-hero-image-background-image: linear-gradient( + -45deg, + #0f775b 50%, + #0f775b 50% + ); + --vp-home-hero-image-filter: blur(40px); +} + +@media (min-width: 640px) { + :root { + --vp-home-hero-image-filter: blur(56px); + } +} + +@media (min-width: 960px) { + :root { + --vp-home-hero-image-filter: blur(72px); + } +} + +/** + * Component: Custom Block + * -------------------------------------------------------------------------- */ + +:root { + --vp-custom-block-tip-border: var(--vp-c-brand); + --vp-custom-block-tip-text: var(--vp-c-brand-darker); + --vp-custom-block-tip-bg: var(--vp-c-brand-dimm); +} + +.dark { + --vp-custom-block-tip-border: var(--vp-c-brand); + --vp-custom-block-tip-text: var(--vp-c-brand-lightest); + --vp-custom-block-tip-bg: var(--vp-c-brand-dimm); +} diff --git a/doc/api/changeset_library.md b/doc/api/changeset_library.md new file mode 100644 index 000000000..7929aa48b --- /dev/null +++ b/doc/api/changeset_library.md @@ -0,0 +1,44 @@ +# Changeset Library + +The [changeset +library](https://github.com/ether/etherpad-lite/blob/develop/src/static/js/Changeset.js) +provides tools to create, read, and apply changesets. + +## Changeset + +```javascript +const Changeset = require('ep_etherpad-lite/static/js/Changeset'); +``` + +A changeset describes the difference between two revisions of a document. When a +user edits a pad, the browser generates and sends a changeset to the server, +which relays it to the other users and saves a copy (so that every past revision +is accessible). + +A transmitted changeset looks like this: + +``` +'Z:z>1|2=m=b*0|1+1$\n' +``` + +## Attribute Pool + +```javascript +const AttributePool = require('ep_etherpad-lite/static/js/AttributePool'); +``` + +Changesets do not include any attribute key–value pairs. Instead, they use +numeric identifiers that reference attributes kept in an [attribute +pool](https://github.com/ether/etherpad-lite/blob/develop/src/static/js/AttributePool.js). +This attribute interning reduces the transmission overhead of attributes that +are used many times. + +There is one attribute pool per pad, and it includes every current and +historical attribute used in the pad. + +## Further Reading + +Detailed information about the changesets & Easysync protocol: + +* [Easysync Protocol](https://github.com/ether/etherpad-lite/blob/develop/doc/easysync/easysync-notes.pdf) +* [Etherpad and EasySync Technical Manual](https://github.com/ether/etherpad-lite/blob/develop/doc/easysync/easysync-full-description.pdf) diff --git a/doc/api/editbar.md b/doc/api/editbar.md new file mode 100644 index 000000000..f448a218a --- /dev/null +++ b/doc/api/editbar.md @@ -0,0 +1,28 @@ +# Editbar +src/static/js/pad_editbar.js + +## isEnabled() + +## disable() + +## toggleDropDown(dropdown) +Shows the dropdown `div.popup` whose `id` equals `dropdown`. + +## registerCommand(cmd, callback) +Register a handler for a specific command. Commands are fired if the corresponding button is clicked or the corresponding select is changed. + +## registerAceCommand(cmd, callback) +Creates an ace callstack and calls the callback with an ace instance (and a toolbar item, if applicable): `callback(cmd, ace, item)`. + +Example: +``` +toolbar.registerAceCommand("insertorderedlist", function (cmd, ace) { + ace.ace_doInsertOrderedList(); +}); +``` + +## registerDropdownCommand(cmd, dropdown) +Ties a `div.popup` where `id` equals `dropdown` to a `command` fired by clicking a button. + +## triggerCommand(cmd[, item]) +Triggers a command (optionally with some internal representation of the toolbar item that triggered it). diff --git a/doc/api/editorInfo.md b/doc/api/editorInfo.md new file mode 100644 index 000000000..834f5ac3c --- /dev/null +++ b/doc/api/editorInfo.md @@ -0,0 +1,79 @@ +# editorInfo + +## editorInfo.ace_replaceRange(start, end, text) +This function replaces a range (from `start` to `end`) with `text`. + +## editorInfo.ace_getRep() +Returns the `rep` object. + +## editorInfo.ace_getAuthor() +## editorInfo.ace_inCallStack() +## editorInfo.ace_inCallStackIfNecessary(?) +## editorInfo.ace_focus(?) +## editorInfo.ace_importText(?) +## editorInfo.ace_importAText(?) +## editorInfo.ace_exportText(?) +## editorInfo.ace_editorChangedSize(?) +## editorInfo.ace_setOnKeyPress(?) +## editorInfo.ace_setOnKeyDown(?) +## editorInfo.ace_setNotifyDirty(?) +## editorInfo.ace_dispose(?) +## editorInfo.ace_setEditable(bool) +## editorInfo.ace_execCommand(?) +## editorInfo.ace_callWithAce(fn, callStack, normalize) +## editorInfo.ace_setProperty(key, value) +## editorInfo.ace_setBaseText(txt) +## editorInfo.ace_setBaseAttributedText(atxt, apoolJsonObj) +## editorInfo.ace_applyChangesToBase(c, optAuthor, apoolJsonObj) +## editorInfo.ace_prepareUserChangeset() +## editorInfo.ace_applyPreparedChangesetToBase() +## editorInfo.ace_setUserChangeNotificationCallback(f) +## editorInfo.ace_setAuthorInfo(author, info) +## editorInfo.ace_fastIncorp(?) +## editorInfo.ace_isCaret(?) +## editorInfo.ace_getLineAndCharForPoint(?) +## editorInfo.ace_performDocumentApplyAttributesToCharRange(?) +## editorInfo.ace_setAttributeOnSelection(attribute, enabled) +Sets an attribute on current range. +Example: `call.editorInfo.ace_setAttributeOnSelection("turkey::balls", true); // turkey is the attribute here, balls is the value +Notes: to remove the attribute pass enabled as false +## editorInfo.ace_toggleAttributeOnSelection(?) +## editorInfo.ace_getAttributeOnSelection(attribute, prevChar) +Returns a boolean if an attribute exists on a selected range. +prevChar value should be true if you want to get the previous Character attribute instead of the current selection for example +if the caret is at position 0,1 (after first character) it's probable you want the attributes on the character at 0,0 +The attribute should be the string name of the attribute applied to the selection IE subscript +Example usage: Apply the activeButton Class to a button if an attribute is on a highlighted/selected caret position or range. +Example `var isItThere = documentAttributeManager.getAttributeOnSelection("turkey::balls", true);` + +See the ep_subscript plugin for an example of this function in action. +Notes: Does not work on first or last character of a line. Suffers from a race condition if called with aceEditEvent. +## editorInfo.ace_performSelectionChange(?) +## editorInfo.ace_doIndentOutdent(?) +## editorInfo.ace_doUndoRedo(?) +## editorInfo.ace_doInsertUnorderedList(?) +## editorInfo.ace_doInsertOrderedList(?) +## editorInfo.ace_performDocumentApplyAttributesToRange() + +## editorInfo.ace_getAuthorInfos() +Returns an info object about the author. Object key = author_id and info includes author's bg color value. +Use to define your own authorship. +## editorInfo.ace_performDocumentReplaceRange(start, end, newText) +This function replaces a range (from [x1,y1] to [x2,y2]) with `newText`. +## editorInfo.ace_performDocumentReplaceCharRange(startChar, endChar, newText) +This function replaces a range (from y1 to y2) with `newText`. +## editorInfo.ace_renumberList(lineNum) +If you delete a line, calling this method will fix the line numbering. +## editorInfo.ace_doReturnKey() +Forces a return key at the current caret position. +## editorInfo.ace_isBlockElement(element) +Returns true if your passed element is registered as a block element +## editorInfo.ace_getLineListType(lineNum) +Returns the line's html list type. +## editorInfo.ace_caretLine() +Returns X position of the caret. +## editorInfo.ace_caretColumn() +Returns Y position of the caret. +## editorInfo.ace_caretDocChar() +Returns the Y offset starting from [x=0,y=0] +## editorInfo.ace_isWordChar(?) diff --git a/doc/api/embed_parameters.md b/doc/api/embed_parameters.md new file mode 100644 index 000000000..8d9f8ac22 --- /dev/null +++ b/doc/api/embed_parameters.md @@ -0,0 +1,75 @@ +# Embed parameters +You can easily embed your etherpad-lite into any webpage by using iframes. You can configure the embedded pad using embed parameters. + +Example: + +Cut and paste the following code into any webpage to embed a pad. The parameters below will hide the chat and the line numbers and will auto-focus on Line 4. + +``` + +``` + +## showLineNumbers +* Boolean + +Default: true + +## showControls +* Boolean + +Default: true + +## showChat +* Boolean + +Default: true + +## useMonospaceFont +* Boolean + +Default: false + +## userName +* String + +Default: "unnamed" + +Example: `userName=Etherpad%20User` + +## userColor +* String (css hex color value) + +Default: randomly chosen by pad server + +Example: `userColor=%23ff9900` + +## noColors +* Boolean + +Default: false + +## alwaysShowChat +* Boolean + +Default: false + +## lang +* String + +Default: en + +Example: `lang=ar` (translates the interface into Arabic) + +## rtl +* Boolean + +Default: true +Displays pad text from right to left. + +## #L +* Int + +Default: 0 +Focuses pad at specific line number and places caret at beginning of this line +Special note: Is not a URL parameter but instead of a Hash value + diff --git a/doc/api/hooks_client-side.adoc b/doc/api/hooks_client-side.adoc index e88737cce..9b0e0d18c 100644 --- a/doc/api/hooks_client-side.adoc +++ b/doc/api/hooks_client-side.adoc @@ -4,7 +4,7 @@ Most of these hooks are called during or in order to set up the formatting process. === documentReady -Called from: src/templates/pad.html +Called from: `src/templates/pad.html` Things in context: @@ -14,7 +14,7 @@ This hook proxies the functionality of jQuery's `$(document).ready` event. === aceDomLinePreProcessLineAttributes -Called from: src/static/js/domline.js +Called from: `src/static/js/domline.js` Things in context: @@ -36,7 +36,7 @@ more. === aceDomLineProcessLineAttributes -Called from: src/static/js/domline.js +Called from: `src/static/js/domline.js` Things in context: @@ -58,7 +58,7 @@ more. === aceCreateDomLine -Called from: src/static/js/domline.js +Called from: `src/static/js/domline.js` Things in context: @@ -78,7 +78,7 @@ question, and cls will be the new class of the element going forward. === acePostWriteDomLineHTML -Called from: src/static/js/domline.js +Called from: `src/static/js/domline.js` Things in context: @@ -89,7 +89,7 @@ page. === aceAttribsToClasses -Called from: src/static/js/linestylefilter.js +Called from: `src/static/js/linestylefilter.js` Things in context: @@ -107,7 +107,7 @@ be parsed into a valid class string. === aceAttribClasses -Called from: src/static/js/linestylefilter.js +Called from: `src/static/js/linestylefilter.js` Things in context: 1. Attributes - Object of Attributes @@ -127,7 +127,7 @@ exports.aceAttribClasses = function(hook_name, attr, cb){ === aceGetFilterStack -Called from: src/static/js/linestylefilter.js +Called from: `src/static/js/linestylefilter.js` Things in context: @@ -143,7 +143,7 @@ later used by the aceCreateDomLine hook (documented above). === aceEditorCSS -Called from: src/static/js/ace.js +Called from: `src/static/js/ace.js` Things in context: None @@ -152,7 +152,7 @@ should be an array of resource urls or paths relative to the plugins directory. === aceInitInnerdocbodyHead -Called from: src/static/js/ace.js +Called from: `src/static/js/ace.js` Things in context: @@ -165,7 +165,7 @@ editor HTML document. === aceEditEvent -Called from: src/static/js/ace2_inner.js +Called from: `src/static/js/ace2_inner.js` Things in context: @@ -182,7 +182,7 @@ your plugin) that use the information provided by the edit event. === aceRegisterNonScrollableEditEvents -Called from: src/static/js/ace2_inner.js +Called from: `src/static/js/ace2_inner.js` Things in context: None @@ -203,7 +203,7 @@ exports.aceRegisterNonScrollableEditEvents = function(){ === aceRegisterBlockElements -Called from: src/static/js/ace2_inner.js +Called from: `src/static/js/ace2_inner.js` Things in context: None @@ -213,7 +213,7 @@ call for those elements. === aceInitialized -Called from: src/static/js/ace2_inner.js +Called from: `src/static/js/ace2_inner.js` Things in context: @@ -228,7 +228,7 @@ use in formatting hooks. === postAceInit -Called from: src/static/js/pad.js +Called from: `src/static/js/pad.js` Things in context: @@ -240,7 +240,7 @@ Things in context: === postToolbarInit -Called from: src/static/js/pad_editbar.js +Called from: `src/static/js/pad_editbar.js` Things in context: @@ -255,14 +255,14 @@ Usage examples: === postTimesliderInit -Called from: src/static/js/timeslider.js +Called from: `src/static/js/timeslider.js` There doesn't appear to be any example available of this particular hook being used, but it gets fired after the timeslider is all set up. === goToRevisionEvent -Called from: src/static/js/broadcast.js +Called from: `src/static/js/broadcast.js` Things in context: @@ -274,7 +274,7 @@ be any example available of this particular hook being used. === userJoinOrUpdate -Called from: src/static/js/pad_userlist.js +Called from: `src/static/js/pad_userlist.js` Things in context: diff --git a/doc/api/hooks_client-side.md b/doc/api/hooks_client-side.md new file mode 100644 index 000000000..e7d039e50 --- /dev/null +++ b/doc/api/hooks_client-side.md @@ -0,0 +1,527 @@ +# Client-side hooks + +Most of these hooks are called during or in order to set up the formatting +process. + +## documentReady +Called from: `src/templates/pad.html` + +Things in context: + +nothing + +This hook proxies the functionality of jQuery's `$(document).ready` event. + +## aceDomLinePreProcessLineAttributes + +Called from: `src/static/js/domline.js` + +Things in context: + +1. domline - The current DOM line being processed +2. cls - The class of the current block element (useful for styling) + +This hook is called for elements in the DOM that have the "lineMarkerAttribute" +set. You can add elements into this category with the aceRegisterBlockElements +hook above. This hook is run BEFORE the numbered and ordered lists logic is +applied. + +The return value of this hook should have the following structure: + +`{ preHtml: String, postHtml: String, processedMarker: Boolean }` + +The preHtml and postHtml values will be added to the HTML display of the +element, and if processedMarker is true, the engine won't try to process it any +more. + +## aceDomLineProcessLineAttributes + +Called from: `src/static/js/domline.js` + +Things in context: + +1. domline - The current DOM line being processed +2. cls - The class of the current block element (useful for styling) + +This hook is called for elements in the DOM that have the "lineMarkerAttribute" +set. You can add elements into this category with the aceRegisterBlockElements +hook above. This hook is run AFTER the ordered and numbered lists logic is +applied. + +The return value of this hook should have the following structure: + +`{ preHtml: String, postHtml: String, processedMarker: Boolean }` + +The preHtml and postHtml values will be added to the HTML display of the +element, and if processedMarker is true, the engine won't try to process it any +more. + +## aceCreateDomLine + +Called from: `src/static/js/domline.js` + +Things in context: + +1. domline - the current DOM line being processed +2. cls - The class of the current element (useful for styling) + +This hook is called for any line being processed by the formatting engine, +unless the aceDomLineProcessLineAttributes hook from above returned true, in +which case this hook is skipped. + +The return value of this hook should have the following structure: + +`{ extraOpenTags: String, extraCloseTags: String, cls: String }` + +extraOpenTags and extraCloseTags will be added before and after the element in +question, and cls will be the new class of the element going forward. + +## acePostWriteDomLineHTML + +Called from: `src/static/js/domline.js` + +Things in context: + +1. node - the DOM node that just got written to the page + +This hook is for right after a node has been fully formatted and written to the +page. + +## aceAttribsToClasses + +Called from: `src/static/js/linestylefilter.js` + +Things in context: + +1. linestylefilter - the JavaScript object that's currently processing the ace + attributes +2. key - the current attribute being processed +3. value - the value of the attribute being processed + +This hook is called during the attribute processing procedure, and should be +used to translate key, value pairs into valid HTML classes that can be inserted +into the DOM. + +The return value for this function should be a list of classes, which will then +be parsed into a valid class string. + +## aceAttribClasses + +Called from: `src/static/js/linestylefilter.js` + +Things in context: +1. Attributes - Object of Attributes + +This hook is called when attributes are investigated on a line. It is useful if +you want to add another attribute type or property type to a pad. + +Example: +``` +exports.aceAttribClasses = function(hook_name, attr, cb){ + attr.sub = 'tag:sub'; + cb(attr); +} +``` + +## aceGetFilterStack + +Called from: `src/static/js/linestylefilter.js` + +Things in context: + +1. linestylefilter - the JavaScript object that's currently processing the ace + attributes +2. browser - an object indicating which browser is accessing the page + +This hook is called to apply custom regular expression filters to a set of +styles. The one example available is the ep_linkify plugin, which adds internal +links. They use it to find the telltale `[[ ]]` syntax that signifies internal +links, and finding that syntax, they add in the internalHref attribute to be +later used by the aceCreateDomLine hook (documented above). + +## aceEditorCSS + +Called from: `src/static/js/ace.js` + +Things in context: None + +This hook is provided to allow custom CSS files to be loaded. The return value +should be an array of resource urls or paths relative to the plugins directory. + +## aceInitInnerdocbodyHead + +Called from: `src/static/js/ace.js` + +Things in context: + +1. iframeHTML - the HTML of the editor iframe up to this point, in array format + +This hook is called during the creation of the editor HTML. The array should +have lines of HTML added to it, giving the plugin author a chance to add in +meta, script, link, and other tags that go into the `` element of the +editor HTML document. + +## aceEditEvent + +Called from: `src/static/js/ace2_inner.js` + +Things in context: + +1. callstack - a bunch of information about the current action +2. editorInfo - information about the user who is making the change +3. rep - information about where the change is being made +4. documentAttributeManager - information about attributes in the document (this + is a mystery to me) + +This hook is made available to edit the edit events that might occur when +changes are made. Currently you can change the editor information, some of the +meanings of the edit, and so on. You can also make internal changes (internal to +your plugin) that use the information provided by the edit event. + +## aceRegisterNonScrollableEditEvents + +Called from: `src/static/js/ace2_inner.js` + +Things in context: None + +When aceEditEvent (documented above) finishes processing the event, it scrolls +the viewport to make caret visible to the user, but if you don't want that +behavior to happen you can use this hook to register which edit events should +not scroll viewport. The return value of this hook should be a list of event +names. + +Example: +``` +exports.aceRegisterNonScrollableEditEvents = function(){ + return [ 'repaginate', 'updatePageCount' ]; +} +``` + +## aceRegisterBlockElements + +Called from: `src/static/js/ace2_inner.js` + +Things in context: None + +The return value of this hook will add elements into the "lineMarkerAttribute" +category, making the aceDomLineProcessLineAttributes hook (documented below) +call for those elements. + +## aceInitialized + +Called from: `src/static/js/ace2_inner.js` + +Things in context: + +1. editorInfo - information about the user who will be making changes through + the interface, and a way to insert functions into the main ace object (see + ep_headings) +2. rep - information about where the user's cursor is +3. documentAttributeManager - some kind of magic + +This hook is for inserting further information into the ace engine, for later +use in formatting hooks. + +## postAceInit + +Called from: `src/static/js/pad.js` + +Things in context: + +1. ace - the ace object that is applied to this editor. +2. clientVars - Object containing client-side configuration such as author ID + and plugin settings. Your plugin can manipulate this object via the + `clientVars` server-side hook. +3. pad - the pad object of the current pad. + +## postToolbarInit + +Called from: `src/static/js/pad_editbar.js` + +Things in context: + +1. ace - the ace object that is applied to this editor. +2. toolbar - Editbar instance. See below for the Editbar documentation. + +Can be used to register custom actions to the toolbar. + +Usage examples: + +* [https://github.com/tiblu/ep_authorship_toggle]() + +## postTimesliderInit + +Called from: `src/static/js/timeslider.js` + +There doesn't appear to be any example available of this particular hook being +used, but it gets fired after the timeslider is all set up. + +## goToRevisionEvent + +Called from: `src/static/js/broadcast.js` + +Things in context: + +1. rev - The newRevision + +This hook gets fired both on timeslider load (as timeslider shows a new +revision) and when the new revision is showed to a user. There doesn't appear to +be any example available of this particular hook being used. + +## userJoinOrUpdate + +Called from: `src/static/js/pad_userlist.js` + +Things in context: + +1. info - the user information + +This hook is called on the client side whenever a user joins or changes. This +can be used to create notifications or an alternate user list. + +## `chatNewMessage` + +Called from: `src/static/js/chat.js` + +This hook runs on the client side whenever a chat message is received from the +server. It can be used to create different notifications for chat messages. Hook +functions can modify the `author`, `authorName`, `duration`, `rendered`, +`sticky`, `text`, and `timeStr` context properties to change how the message is +processed. The `text` and `timeStr` properties may contain HTML and come +pre-sanitized; plugins should be careful to sanitize any added user input to +avoid introducing an XSS vulnerability. + +Context properties: + +* `authorName`: The display name of the user that wrote the message. +* `author`: The author ID of the user that wrote the message. +* `text`: Sanitized message HTML, with URLs wrapped like `url`. (Note that `message.text` is not sanitized or processed + in any way.) +* `message`: The raw message object as received from the server, except with + time correction and a default `authorId` property if missing. Plugins must not + modify this object. Warning: Unlike `text`, `message.text` is not + pre-sanitized or processed in any way. +* `rendered` - Used to override the default message rendering. Initially set to + `null`. If the hook function sets this to a DOM element object or a jQuery + object, then that object will be used as the rendered message UI. Otherwise, + if this is set to `null`, then Etherpad will render a default UI for the + message using the other context properties. +* `sticky` (boolean): Whether the gritter notification should fade out on its + own or just sit there until manually closed. +* `timestamp`: When the chat message was sent (milliseconds since epoch), + corrected using the difference between the local clock and the server's clock. +* `timeStr`: The message timestamp as a formatted string. +* `duration`: How long (in milliseconds) to display the gritter notification (0 + to disable). + +## `chatSendMessage` + +Called from: `src/static/js/chat.js` + +This hook runs on the client side whenever the user sends a new chat message. +Plugins can mutate the message object to change the message text or add metadata +to control how the message will be rendered by the `chatNewMessage` hook. + +Context properties: + +* `message`: The message object that will be sent to the Etherpad server. + +## collectContentPre + +Called from: `src/static/js/contentcollector.js` + +Things in context: + +1. cc - the contentcollector object +2. state - the current state of the change being made +3. tname - the tag name of this node currently being processed +4. styl - the style applied to the node (probably CSS) -- Note the typo +5. cls - the HTML class string of the node + +This hook is called before the content of a node is collected by the usual +methods. The cc object can be used to do a bunch of things that modify the +content of the pad. See, for example, the heading1 plugin for etherpad original. + +E.g. if you need to apply an attribute to newly inserted characters, call +cc.doAttrib(state, "attributeName") which results in an attribute +attributeName=true. + +If you want to specify also a value, call cc.doAttrib(state, +"attributeName::value") which results in an attribute attributeName=value. + + +## collectContentImage + +Called from: `src/static/js/contentcollector.js` + +Things in context: + +1. cc - the contentcollector object +2. state - the current state of the change being made +3. tname - the tag name of this node currently being processed +4. style - the style applied to the node (probably CSS) +5. cls - the HTML class string of the node +6. node - the node being modified + +This hook is called before the content of an image node is collected by the +usual methods. The cc object can be used to do a bunch of things that modify the +content of the pad. + +Example: + +``` +exports.collectContentImage = function(name, context){ + context.state.lineAttributes.img = context.node.outerHTML; +} + +``` + +## collectContentPost + +Called from: `src/static/js/contentcollector.js` + +Things in context: + +1. cc - the contentcollector object +2. state - the current state of the change being made +3. tname - the tag name of this node currently being processed +4. style - the style applied to the node (probably CSS) +5. cls - the HTML class string of the node + +This hook is called after the content of a node is collected by the usual +methods. The cc object can be used to do a bunch of things that modify the +content of the pad. See, for example, the heading1 plugin for etherpad original. + +## handleClientMessage_`name` + +Called from: `src/static/js/collab_client.js` + +Things in context: + +1. payload - the data that got sent with the message (use it for custom message + content) + +This hook gets called every time the client receives a message of type `name`. +This can most notably be used with the new HTTP API call, "sendClientsMessage", +which sends a custom message type to all clients connected to a pad. You can +also use this to handle existing types. + +`collab_client.js` has a pretty extensive list of message types, if you want to +take a look. + +## aceStartLineAndCharForPoint-aceEndLineAndCharForPoint + +Called from: src/static/js/ace2_inner.js + +Things in context: + +1. callstack - a bunch of information about the current action +2. editorInfo - information about the user who is making the change +3. rep - information about where the change is being made +4. root - the span element of the current line +5. point - the starting/ending element where the cursor highlights +6. documentAttributeManager - information about attributes in the document + +This hook is provided to allow a plugin to turn DOM node selection into +[line,char] selection. The return value should be an array of [line,char] + +## aceKeyEvent + +Called from: `src/static/js/ace2_inner.js` + +Things in context: + +1. callstack - a bunch of information about the current action +2. editorInfo - information about the user who is making the change +3. rep - information about where the change is being made +4. documentAttributeManager - information about attributes in the document +5. evt - the fired event + +This hook is provided to allow a plugin to handle key events. +The return value should be true if you have handled the event. + +## collectContentLineText + +Called from: `src/static/js/contentcollector.js` + +Things in context: + +1. cc - the contentcollector object +2. state - the current state of the change being made +3. tname - the tag name of this node currently being processed +4. text - the text for that line + +This hook allows you to validate/manipulate the text before it's sent to the +server side. To change the text, either: + +* Set the `text` context property to the desired value and return `undefined`. +* (Deprecated) Return a string. If a hook function changes the `text` context + property, the return value is ignored. If no hook function changes `text` but + multiple hook functions return a string, the first one wins. + +Example: + +``` +exports.collectContentLineText = (hookName, context) => { + context.text = tweakText(context.text); +}; +``` + +## collectContentLineBreak + +Called from: `src/static/js/contentcollector.js` + +Things in context: + +1. cc - the contentcollector object +2. state - the current state of the change being made +3. tname - the tag name of this node currently being processed + +This hook is provided to allow whether the br tag should induce a new magic +domline or not. The return value should be either true(break the line) or false. + +## disableAuthorColorsForThisLine + +Called from: `src/static/js/linestylefilter.js` + +Things in context: + +1. linestylefilter - the JavaScript object that's currently processing the ace + attributes +2. text - the line text +3. class - line class + +This hook is provided to allow whether a given line should be deliniated with +multiple authors. Multiple authors in one line cause the creation of magic span +lines. This might not suit you and now you can disable it and handle your own +deliniation. The return value should be either true(disable) or false. + +## aceSetAuthorStyle + +Called from: `src/static/js/ace2_inner.js` + +Things in context: + +1. dynamicCSS - css manager for inner ace +2. outerDynamicCSS - css manager for outer ace +3. parentDynamicCSS - css manager for parent document +4. info - author style info +5. author - author info +6. authorSelector - css selector for author span in inner ace + +This hook is provided to allow author highlight style to be modified. Registered +hooks should return 1 if the plugin handles highlighting. If no plugin returns +1, the core will use the default background-based highlighting. + +## aceSelectionChanged + +Called from: `src/static/js/ace2_inner.js` + +Things in context: + +1. rep - information about where the user's cursor is +2. documentAttributeManager - information about attributes in the document + +This hook allows a plugin to react to a cursor or selection change, +perhaps to update a UI element based on the style at the cursor location. diff --git a/doc/api/hooks_overview.md b/doc/api/hooks_overview.md new file mode 100644 index 000000000..35a88dbe1 --- /dev/null +++ b/doc/api/hooks_overview.md @@ -0,0 +1,117 @@ +# Hooks + +A hook function is registered with a hook via the plugin's `ep.json` file. See +the Plugins section for details. A hook may have many registered functions from +different plugins. + +Some hooks call their registered functions one at a time until one of them +returns a value. Others always call all of their registered functions and +combine the results (if applicable). + +## Registered hook functions + +Note: The documentation in this section applies to every hook unless the +hook-specific documentation says otherwise. + +### Arguments + +Hook functions are called with three arguments: + +1. `hookName` - The name of the hook being invoked. +2. `context` - An object with some relevant information about the context of the + call. See the hook-specific documentation for details. +3. `cb` - For asynchronous operations this callback can be called to signal + completion and optionally provide a return value. The callback takes a single + argument, the meaning of which depends on the hook (see the "Return values" + section for general information that applies to most hooks). This callback + always returns `undefined`. + +### Expected behavior + +The presence of a callback parameter suggests that every hook function can run +asynchronously. While that is the eventual goal, there are some legacy hooks +that expect their hook functions to provide a value synchronously. For such +hooks, the hook functions must do one of the following: + +* Call the callback with a non-Promise value (`undefined` is acceptable) and + return `undefined`, in that order. +* Return a non-Promise value other than `undefined` (`null` is acceptable) and + never call the callback. Note that `async` functions *always* return a + Promise, so they must never be used for synchronous hooks. +* Only have two parameters (`hookName` and `context`) and return any non-Promise + value (`undefined` is acceptable). + +For hooks that permit asynchronous behavior, the hook functions must do one or +more of the following: + +* Return `undefined` and call the callback, in either order. +* Return something other than `undefined` (`null` is acceptable) and never call + the callback. Note that `async` functions *always* return a Promise, so they + must never call the callback. +* Only have two parameters (`hookName` and `context`). + +Note that the acceptable behaviors for asynchronous hook functions is a superset +of the acceptable behaviors for synchronous hook functions. + +WARNING: The number of parameters is determined by examining +[Function.length](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/length), +which does not count [default +parameters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters) +or ["rest" +parameters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters). +To avoid problems, do not use default or rest parameters when defining hook +functions. + +### Return values + +A hook function can provide a value to Etherpad in one of the following ways: + +* Pass the desired value as the first argument to the callback. +* Return the desired value directly. The value must not be `undefined` unless + the hook function only has two parameters. (Hook functions with three + parameters that want to provide `undefined` should instead use the callback.) +* For hooks that permit asynchronous behavior, return a Promise that resolves to + the desired value. +* For hooks that permit asynchronous behavior, pass a Promise that resolves to + the desired value as the first argument to the callback. + +Examples: + +```javascript +exports.exampleOne = (hookName, context, callback) => { + return 'valueOne'; +}; + +exports.exampleTwo = (hookName, context, callback) => { + callback('valueTwo'); + return; +}; + +// ONLY FOR HOOKS THAT PERMIT ASYNCHRONOUS BEHAVIOR +exports.exampleThree = (hookName, context, callback) => { + return new Promise('valueThree'); +}; + +// ONLY FOR HOOKS THAT PERMIT ASYNCHRONOUS BEHAVIOR +exports.exampleFour = (hookName, context, callback) => { + callback(new Promise('valueFour')); + return; +}; + +// ONLY FOR HOOKS THAT PERMIT ASYNCHRONOUS BEHAVIOR +exports.exampleFive = async (hookName, context) => { + // Note that this function is async, so it actually returns a Promise that + // is resolved to 'valueFive'. + return 'valueFive'; +}; +``` + +Etherpad collects the values provided by the hook functions into an array, +filters out all `undefined` values, then flattens the array one level. +Flattening one level makes it possible for a hook function to behave as if it +were multiple separate hook functions. + +For example: Suppose a hook has eight registered functions that return the +following values: `1`, `[2]`, `['3a', '3b']` `[[4]]`, `undefined`, +`[undefined]`, `[]`, and `null`. The value returned to the caller of the hook is +`[1, 2, '3a', '3b', [4], undefined, null]`. diff --git a/doc/api/hooks_server-side.adoc b/doc/api/hooks_server-side.adoc index d95d4ec6b..25a696b43 100644 --- a/doc/api/hooks_server-side.adoc +++ b/doc/api/hooks_server-side.adoc @@ -2,7 +2,7 @@ These hooks are called on server-side. === loadSettings -Called from: src/node/server.ts +Called from: `src/node/server.ts` Things in context: @@ -11,7 +11,7 @@ Things in context: Use this hook to receive the global settings in your plugin. === shutdown -Called from: src/node/server.ts +Called from: `src/node/server.ts` Things in context: None @@ -34,7 +34,7 @@ exports.shutdown = async (hookName, context) => { ---- === pluginUninstall -Called from: src/static/js/pluginfw/installer.js +Called from: `src/static/js/pluginfw/installer.js` Things in context: @@ -43,7 +43,7 @@ Things in context: If this hook returns an error, the callback to the uninstall function gets an error as well. This mostly seems useful for handling additional features added in based on the installation of other plugins, which is pretty cool! === pluginInstall -Called from: src/static/js/pluginfw/installer.js +Called from: `src/static/js/pluginfw/installer.js` Things in context: @@ -123,7 +123,7 @@ Context properties: === expressCloseServer -Called from: src/node/hooks/express.js +Called from: `src/node/hooks/express.js` Things in context: Nothing @@ -142,7 +142,7 @@ exports.expressCloseServer = async () => { ---- === eejsBlock_`` -Called from: src/node/eejs/index.js +Called from: `src/node/eejs/index.js` Things in context: diff --git a/doc/api/hooks_server-side.md b/doc/api/hooks_server-side.md new file mode 100644 index 000000000..47156a920 --- /dev/null +++ b/doc/api/hooks_server-side.md @@ -0,0 +1,1103 @@ +# Server-side hooks + +These hooks are called on server-side. + +## loadSettings +Called from: `src/node/server.js` + +Things in context: + +1. settings - the settings object + +Use this hook to receive the global settings in your plugin. + +## shutdown +Called from: `src/node/server.js` + +Things in context: None + +This hook runs before shutdown. Use it to stop timers, close sockets and files, +flush buffers, etc. The database is not available while this hook is running. +The shutdown function must not block for long because there is a short timeout +before the process is forcibly terminated. + +The shutdown function must return a Promise, which must resolve to `undefined`. +Returning `callback(value)` will return a Promise that is resolved to `value`. + +Example: + +``` +// using an async function +exports.shutdown = async (hookName, context) => { + await flushBuffers(); +}; +``` + +## pluginUninstall +Called from: `src/static/js/pluginfw/installer.js` + +Things in context: + +1. plugin_name - self-explanatory + +If this hook returns an error, the callback to the uninstall function gets an error as well. This mostly seems useful for handling additional features added in based on the installation of other plugins, which is pretty cool! + +## pluginInstall +Called from: `src/static/js/pluginfw/installer.js` + +Things in context: + +1. plugin_name - self-explanatory + +If this hook returns an error, the callback to the install function gets an error, too. This seems useful for adding in features when a particular plugin is installed. + +## `init_` + +Called from: `src/static/js/pluginfw/plugins.js` + +Run during startup after the named plugin is initialized. + +Context properties: + +* `logger`: An object with the following `console`-like methods: `debug`, + `info`, `log`, `warn`, `error`. + +## `expressPreSession` + +Called from: `src/node/hooks/express.js` + +Called during server startup just before the +[`express-session`](https://www.npmjs.com/package/express-session) middleware is +added to the Express Application object. Use this hook to add route handlers or +middleware that executes before `express-session` state is created and +authentication is performed. This is useful for creating public endpoints that +don't spam the database with new `express-session` records or trigger +authentication. + +**WARNING:** All handlers registered during this hook run before the built-in +authentication checks, so any handled endpoints will be public unless the +handler itself authenticates the user. + +Context properties: + +* `app`: The Express [Application](https://expressjs.com/en/4x/api.html#app) + object. + +Example: + +```javascript +exports.expressPreSession = async (hookName, {app}) => { + app.get('/hello-world', (req, res) => res.send('hello world')); +}; +``` + +## `expressConfigure` + +Called from: `src/node/hooks/express.js` + +Called during server startup just after the +[`express-session`](https://www.npmjs.com/package/express-session) middleware is +added to the Express Application object. Use this hook to add route handlers or +middleware that executes after `express-session` state is created and +authentication is performed. + +Context properties: + +* `app`: The Express [Application](https://expressjs.com/en/4x/api.html#app) + object. + +## `expressCreateServer` + +Called from: `src/node/hooks/express.js` + +Identical to the `expressConfigure` hook (the two run in parallel with each +other) except this hook's context includes the HTTP Server object. + +Context properties: + +* `app`: The Express [Application](https://expressjs.com/en/4x/api.html#app) + object. +* `server`: The [http.Server](https://nodejs.org/api/http.html#class-httpserver) + or [https.Server](https://nodejs.org/api/https.html#class-httpsserver) object. + +## expressCloseServer + +Called from: `src/node/hooks/express.js` + +Things in context: Nothing + +This hook is called when the HTTP server is closing, which happens during +shutdown (see the shutdown hook) and when the server restarts (e.g., when a +plugin is installed via the `/admin/plugins` page). The HTTP server may or may +not already be closed when this hook executes. + +Example: + +``` +exports.expressCloseServer = async () => { + await doSomeCleanup(); +}; +``` + +## eejsBlock_`` +Called from: `src/node/eejs/index.js` + +Things in context: + +1. content - the content of the block + +This hook gets called upon the rendering of an ejs template block. For any specific kind of block, you can change how that block gets rendered by modifying the content object passed in. + +Available blocks in `pad.html` are: + +* `htmlHead` - after `` and immediately before the title tag +* `styles` - the style ``s +* `body` - the contents of the body tag +* `editbarMenuLeft` - the left tool bar (consider using the toolbar controller instead of manually adding html here) +* `editbarMenuRight` - right tool bar +* `afterEditbar` - allows you to add stuff immediately after the toolbar +* `userlist` - the contents of the userlist dropdown +* `loading` - the initial loading message +* `mySettings` - the left column of the settings dropdown ("My view"); intended for adding checkboxes only +* `mySettings.dropdowns` - add your dropdown settings here +* `globalSettings` - the right column of the settings dropdown ("Global view") +* `importColumn` - import form +* `exportColumn` - export form +* `modals` - Contains all connectivity messages +* `embedPopup` - the embed dropdown +* `scripts` - Add your script tags here, if you really have to (consider use client-side hooks instead) + +`timeslider.html` blocks: + +* `timesliderStyles` +* `timesliderScripts` +* `timesliderBody` +* `timesliderTop` +* `timesliderEditbarRight` +* `modals` + +`index.html` blocks: + +* `indexCustomStyles` - contains the `index.css` `` tag, allows you to add your own or to customize the one provided by the active skin +* `indexWrapper` - contains the form for creating new pads +* `indexCustomScripts` - contains the `index.js` `