From 1f064b8600228393a32fef543267028e1ce7f5c0 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Thu, 11 Feb 2021 22:47:32 +0100 Subject: [PATCH 1/3] remove the color experiment --- .../Experiments/Color/extension/Color.ts | 68 ----------------- .../Experiments/Color/extension/index.ts | 4 - docs/src/demos/Experiments/Color/index.vue | 76 ------------------- docs/src/docPages/experiments.md | 1 - docs/src/docPages/experiments/color.md | 5 -- 5 files changed, 154 deletions(-) delete mode 100644 docs/src/demos/Experiments/Color/extension/Color.ts delete mode 100644 docs/src/demos/Experiments/Color/extension/index.ts delete mode 100644 docs/src/demos/Experiments/Color/index.vue delete mode 100644 docs/src/docPages/experiments/color.md diff --git a/docs/src/demos/Experiments/Color/extension/Color.ts b/docs/src/demos/Experiments/Color/extension/Color.ts deleted file mode 100644 index 0c5e98c6..00000000 --- a/docs/src/demos/Experiments/Color/extension/Color.ts +++ /dev/null @@ -1,68 +0,0 @@ -// @ts-nocheck -import { Extension } from '@tiptap/core' -import { Decoration, DecorationSet } from 'prosemirror-view' -import { Plugin } from 'prosemirror-state' - -function detectColors(doc) { - const hexColor = /(#[0-9a-f]{3,6})\b/ig - const results = [] - const decorations: [any?] = [] - - doc.descendants((node: any, position: any) => { - if (!node.isText) { - return - } - - let matches - - // eslint-disable-next-line - while (matches = hexColor.exec(node.text)) { - results.push({ - color: matches[0], - from: position + matches.index, - to: position + matches.index + matches[0].length, - }) - } - }) - - results.forEach(issue => { - decorations.push(Decoration.inline(issue.from, issue.to, { - class: 'color', - style: `--color: ${issue.color}`, - })) - }) - - return DecorationSet.create(doc, decorations) -} - -export const Color = Extension.create({ - name: 'color', - - addProseMirrorPlugins() { - return [ - new Plugin({ - state: { - init(_, { doc }) { - return detectColors(doc) - }, - apply(transaction, oldState) { - return transaction.docChanged - ? detectColors(transaction.doc) - : oldState - }, - }, - props: { - decorations(state) { - return this.getState(state) - }, - }, - }), - ] - }, -}) - -declare module '@tiptap/core' { - interface AllExtensions { - Color: typeof Color, - } -} diff --git a/docs/src/demos/Experiments/Color/extension/index.ts b/docs/src/demos/Experiments/Color/extension/index.ts deleted file mode 100644 index d73a0a1b..00000000 --- a/docs/src/demos/Experiments/Color/extension/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { Color } from './Color' - -export * from './Color' -export default Color diff --git a/docs/src/demos/Experiments/Color/index.vue b/docs/src/demos/Experiments/Color/index.vue deleted file mode 100644 index a4692831..00000000 --- a/docs/src/demos/Experiments/Color/index.vue +++ /dev/null @@ -1,76 +0,0 @@ - - - - - diff --git a/docs/src/docPages/experiments.md b/docs/src/docPages/experiments.md index ecc42f16..aeb02e6a 100644 --- a/docs/src/docPages/experiments.md +++ b/docs/src/docPages/experiments.md @@ -4,7 +4,6 @@ Congratulations! You’ve found our playground with a list of experiments. Be aw ## New * [Linter](/experiments/linter) * [Comments](/experiments/comments) -* [Color](/experiments/color) * [Commands](/experiments/commands) * [Embeds](/experiments/embeds) * [Multiple editors](/experiments/multiple-editors) diff --git a/docs/src/docPages/experiments/color.md b/docs/src/docPages/experiments/color.md deleted file mode 100644 index 5cc46027..00000000 --- a/docs/src/docPages/experiments/color.md +++ /dev/null @@ -1,5 +0,0 @@ -# Color - -⚠️ Experiment - - From 65b52afd5a653d30773d5a7ccb35c14de7f71501 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Thu, 11 Feb 2021 23:10:56 +0100 Subject: [PATCH 2/3] docs: update content --- docs/src/docPages/experiments.md | 8 +-- docs/src/docPages/guide/configuration.md | 78 +++++++++++++++++++++++- 2 files changed, 79 insertions(+), 7 deletions(-) diff --git a/docs/src/docPages/experiments.md b/docs/src/docPages/experiments.md index aeb02e6a..fbc63309 100644 --- a/docs/src/docPages/experiments.md +++ b/docs/src/docPages/experiments.md @@ -3,11 +3,11 @@ Congratulations! You’ve found our playground with a list of experiments. Be aw ## New * [Linter](/experiments/linter) -* [Comments](/experiments/comments) -* [Commands](/experiments/commands) -* [Embeds](/experiments/embeds) * [Multiple editors](/experiments/multiple-editors) -* [Details](/experiments/details) +* [@tiptap/extension-slash-command?](/experiments/commands) +* [@tiptap/extension-iframe?](/experiments/embeds) +* [@tiptap/extension-toggle-list?](/experiments/details) +* [@tiptap/extension-collaboration-annotation?](/experiments/comments) ## Waiting for approval * [@tiptap/extension-placeholder](/experiments/placeholder) diff --git a/docs/src/docPages/guide/configuration.md b/docs/src/docPages/guide/configuration.md index 0cefd0b8..1c43fd9b 100644 --- a/docs/src/docPages/guide/configuration.md +++ b/docs/src/docPages/guide/configuration.md @@ -37,8 +37,27 @@ This will do the following: 5. make the text editable (but that’s the default anyway), and 6. disable the loading of [the default CSS](https://github.com/ueberdosis/tiptap-next/tree/main/packages/core/src/style.ts) (which is not much anyway). -## Configure extensions -A lot of the extension can be configured, too. Add an `.configure()` to the extension and pass an object to it. The following example will disable the default heading levels 4, 5 and 6: +## Nodes, marks and extensions +Most features are packed into [nodes](/api/nodes), [marks](/api/marks) and [extensions](/api/extensions). Import what you need and pass them as an Array to the editor and you are good to go. Here is the minimal setup with only three extensions: + +```js +import { Editor } from '@tiptap/core' +import Document from '@tiptap/extension-document' +import Paragraph from '@tiptap/extension-paragraph' +import Text from '@tiptap/extension-text' + +new Editor({ + element: document.querySelector('.element'), + extensions: [ + Document, + Paragraph, + Text, + ], +}) +``` + +### Configure an extensions +Most extensions can be configured. Add a `.configure()` to pass an object to it. The following example will disable the default heading levels 4, 5 and 6: ```js import { Editor } from '@tiptap/core' @@ -60,4 +79,57 @@ new Editor({ }) ``` -Have a look at the documentation of the extension you’re using to learn more about their settings. +Have a look at the documentation of the extension you use to learn more about their settings. + +### Default extensions +We have put together a few of the most common extensions and provide a `defaultExtensions()` helper to load them. Here is how you to use that: + +```js +import { Editor, defaultExtensions } from '@tiptap/starter-kit' + +new Editor({ + extensions: defaultExtensions(), +}) +``` + +And you can even pass configuration for all default extensions as an object. Just prefix the configuration with the extension name: + +```js +import { Editor, defaultExtensions } from '@tiptap/starter-kit' + +new Editor({ + extensions: defaultExtensions({ + heading: { + levels: [1, 2, 3] + }, + }), +}) +``` + +The `defaultExtensions()` function returns an array, so if you want to load them and add some custom extensions you could write it like that: + +```js +import { Editor, defaultExtensions } from '@tiptap/starter-kit' +import Strike from '@tiptap/extension-strike' + +new Editor({ + extensions: [ + ...defaultExtensions(), + Strike, + ], +}) +``` + +Don’t want to load a specific extension? Just filter it out: + +```js +import { Editor, defaultExtensions } from '@tiptap/starter-kit' + +new Editor({ + extensions: [ + ...defaultExtensions().filter(extension => extension.config.name !== 'history'), + ] +}) +``` + +You’ll probably see something like that in collaborative editing examples. The [`Collaboration`](/api/extensions/collaboration) comes with its own history extension, you need to remove the default [`History`](/api/extensions/history) extension to avoid conflicts. From 2955ef274ae6a5e90dc7678d118d64d2782ceca6 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Thu, 11 Feb 2021 23:23:46 +0100 Subject: [PATCH 3/3] annotations: add tasks to AnnotationState --- .../Experiments/Annotation/extension/AnnotationState.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/docs/src/demos/Experiments/Annotation/extension/AnnotationState.ts b/docs/src/demos/Experiments/Annotation/extension/AnnotationState.ts index 587d2260..2de4e2ed 100644 --- a/docs/src/demos/Experiments/Annotation/extension/AnnotationState.ts +++ b/docs/src/demos/Experiments/Annotation/extension/AnnotationState.ts @@ -18,9 +18,17 @@ export class AnnotationState { constructor(options: AnnotationStateOptions) { this.options = options + + // TODO: Observe Y.js changes and re-render decorations + // this.options.map.observe(e => { + // console.log('e', e) + // }) } findAnnotation(id: number) { + // TODO: Get from Y.js? + // this.decorations.get(id) + const current = this.decorations.find() for (let i = 0; i < current.length; i += 1) {