@dxos/react-ui-editor 0.4.8-main.ac78619 → 0.4.8-main.beadd4b

package/src/extensions/automerge/automerge.stories.tsx

@@ -9,7 +9,7 @@ import '@preact/signals-react';
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { Repo } from '@dxos/automerge/automerge-repo';
-import { createDocAccessor, Filter } from '@dxos/echo-schema';
+import { createDocAccessor, Filter, DocAccessor } from '@dxos/echo-schema';
 import { type PublicKey } from '@dxos/keys';
 import { Expando, TextObject, useSpace } from '@dxos/react-client/echo';
 import { ClientRepeater } from '@dxos/react-client/testing';
@@ -17,9 +17,9 @@ import { useThemeContext } from '@dxos/react-ui';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { automerge } from './automerge';
-import { DocAccessor } from './defs';
-import { createBasicExtensions, createThemeExtensions, useTextEditor } from '../../hooks';
+import { useTextEditor } from '../../hooks';
 import translations from '../../translations';
+import { createBasicExtensions, createThemeExtensions } from '../factories';
 
 const initialContent = 'Hello world!';
 
@@ -34,21 +34,19 @@ type EditorProps = {
 
 const Editor = ({ source, autoFocus }: EditorProps) => {
   const { themeMode } = useThemeContext();
-  const extensions = useMemo(
-    () => [
-      createBasicExtensions({ placeholder: 'Type here...' }),
-      createThemeExtensions({ themeMode, slots: { editor: { className: 'p-2 bg-white dark:bg-black' } } }),
-      automerge(source),
-    ],
-    [themeMode, source],
+  const { parentRef } = useTextEditor(
+    () => ({
+      doc: DocAccessor.getValue(source),
+      extensions: [
+        createBasicExtensions({ placeholder: 'Type here...' }),
+        createThemeExtensions({ themeMode, slots: { editor: { className: 'p-2 bg-white dark:bg-black' } } }),
+        automerge(source),
+      ],
+      autoFocus,
+    }),
+    [source, themeMode],
   );
 
-  const { parentRef } = useTextEditor({
-    doc: DocAccessor.getValue(source),
-    extensions,
-    autoFocus,
-  });
-
   return <div ref={parentRef} />;
 };
 
@@ -114,7 +112,8 @@ const EchoStory = ({ spaceKey }: { spaceKey: PublicKey }) => {
 
 export const Default = {};
 
-// TODO(burdon): Feed already added error.
+// TODO(burdon): Error:
+//  chunk-6NX3RPDS.mjs:2021 ControlPipeline#5 Error: invariant violation: Feed already added
 export const WithEcho = {
   decorators: [withTheme],
   render: () => {

package/src/extensions/automerge/automerge.ts

@@ -8,9 +8,10 @@ import { StateField, type Extension } from '@codemirror/state';
 import { EditorView, ViewPlugin } from '@codemirror/view';
 
 import { next as A } from '@dxos/automerge/automerge';
+import { type DocAccessor } from '@dxos/echo-schema';
 
 import { cursorConverter } from './cursor';
-import { updateHeadsEffect, isReconcile, type State, type DocAccessor } from './defs';
+import { updateHeadsEffect, isReconcile, type State } from './defs';
 import { Syncer } from './sync';
 import { Cursor } from '../cursor';
 

package/src/extensions/automerge/cursor.ts

@@ -5,9 +5,9 @@
 import get from 'lodash.get';
 
 import { next as A } from '@dxos/automerge/automerge';
+import { type DocAccessor } from '@dxos/echo-schema';
 import { log } from '@dxos/log';
 
-import { type DocAccessor } from './defs';
 import { type CursorConverter } from '../cursor';
 
 export const cursorConverter = ({ handle, path }: DocAccessor): CursorConverter => ({

package/src/extensions/automerge/defs.ts

@@ -5,9 +5,8 @@
 //
 
 import { Annotation, StateEffect, type StateField, type EditorState, type Transaction } from '@codemirror/state';
-import get from 'lodash.get';
 
-import { type ChangeFn, type ChangeOptions, type Doc, type Heads, type Prop } from '@dxos/automerge/automerge';
+import { type Heads, type Prop } from '@dxos/automerge/automerge';
 
 export type State = {
   path: Prop[];
@@ -31,23 +30,3 @@ export const reconcileAnnotation = Annotation.define<boolean>();
 export const isReconcile = (tr: Transaction): boolean => {
   return !!tr.annotation(reconcileAnnotation);
 };
-
-// TODO(burdon): Reconcile with echo.
-export interface DocAccessor<T = any> {
-  handle: IDocHandle<T>;
-  get path(): string[]; // TODO(burdon): Getter or prop?
-}
-
-// TODO(burdon): Reconcile with echo.
-export const DocAccessor = {
-  getValue: (accessor: DocAccessor) => get(accessor.handle, accessor.path),
-};
-
-// TODO(burdon): Reconcile with echo.
-export interface IDocHandle<T = any> {
-  docSync(): Doc<T> | undefined;
-  change(callback: ChangeFn<T>, options?: ChangeOptions<T>): void;
-  changeAt(heads: Heads, callback: ChangeFn<T>, options?: ChangeOptions<T>): string[] | undefined;
-  addListener(event: 'change', listener: () => void): void;
-  removeListener(event: 'change', listener: () => void): void;
-}

package/src/extensions/automerge/index.ts

@@ -3,4 +3,3 @@
 //
 
 export { automerge } from './automerge';
-export { type IDocHandle } from './defs';

package/src/extensions/automerge/sync.ts

@@ -8,16 +8,9 @@ import { type StateField } from '@codemirror/state';
 import { type EditorView } from '@codemirror/view';
 
 import { next as A } from '@dxos/automerge/automerge';
+import { type IDocHandle } from '@dxos/echo-schema';
 
-import {
-  getLastHeads,
-  getPath,
-  type IDocHandle,
-  type State,
-  reconcileAnnotation,
-  updateHeads,
-  isReconcile,
-} from './defs';
+import { getLastHeads, getPath, type State, reconcileAnnotation, updateHeads, isReconcile } from './defs';
 import { updateAutomerge } from './update-automerge';
 import { updateCodeMirror } from './update-codemirror';
 

package/src/extensions/automerge/update-automerge.ts

@@ -7,8 +7,9 @@
 import { type EditorState, type StateField, type Transaction, type Text } from '@codemirror/state';
 
 import { next as A, type Heads } from '@dxos/automerge/automerge';
+import { type IDocHandle } from '@dxos/echo-schema';
 
-import { type IDocHandle, type State } from './defs';
+import { type State } from './defs';
 
 export const updateAutomerge = (
   field: StateField<State>,

package/src/{hooks → extensions/awareness}/awareness-provider.ts

@@ -9,7 +9,7 @@ import { log } from '@dxos/log';
 import { type Space } from '@dxos/react-client/echo';
 import { type GossipMessage } from '@dxos/react-client/mesh';
 
-import { type AwarenessInfo, type AwarenessPosition, type AwarenessProvider, type AwarenessState } from '../extensions';
+import { type AwarenessInfo, type AwarenessPosition, type AwarenessProvider, type AwarenessState } from './awareness';
 
 type ProtocolMessage =
   | {

package/src/extensions/{awareness.ts → awareness/awareness.ts}

@@ -16,7 +16,7 @@ import {
 import { Event } from '@dxos/async';
 import { Context } from '@dxos/context';
 
-import { Cursor, type CursorConverter } from './cursor';
+import { Cursor, type CursorConverter } from '../cursor';
 
 export interface AwarenessProvider {
   remoteStateChange: Event<void>;

package/src/extensions/awareness/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './awareness';
+export * from './awareness-provider';

package/src/extensions/command/state.ts

@@ -74,7 +74,7 @@ export const commandState = StateField.define<CommandState>({
 
     return state;
   },
-  provide: (f) => [showTooltip.from(f, (value) => value.tooltip ?? null)],
+  provide: (field) => [showTooltip.from(field, (value) => value.tooltip ?? null)],
 });
 
 export const openEffect = StateEffect.define<{ pos: number; fullWidth?: boolean }>();

package/src/extensions/comments.ts

@@ -13,7 +13,7 @@ import { log } from '@dxos/log';
 import { nonNullable } from '@dxos/util';
 
 import { Cursor } from './cursor';
-import { type Comment, type Range } from '../hooks';
+import { type Comment, type Range } from './types';
 import { getToken } from '../styles';
 import { callbackWrapper } from '../util';
 
@@ -508,12 +508,16 @@ export const focusComment = (view: EditorView, id: string, center = true) => {
 /**
  * Update comments state field.
  */
-export const useComments = (view: EditorView | null, id: string, comments: Comment[] = []) => {
+export const useComments = (view: EditorView | null | undefined, id: string, comments: Comment[] = []) => {
   useEffect(() => {
     if (view) {
-      view.dispatch({
-        effects: setComments.of({ id, comments }),
-      });
+      // Check same document.
+      // NOTE: Hook might be called before editor state is updated.
+      if (id === view.state.facet(documentId)) {
+        view.dispatch({
+          effects: setComments.of({ id, comments }),
+        });
+      }
     }
   }, [id, view, comments]);
 };

package/src/extensions/cursor-line-margin.ts

@@ -5,26 +5,26 @@
 // Based upon @acheronfail’s implementation, fetched 16 Feb 2024
 // https://discuss.codemirror.net/t/cursorscrollmargin-for-v6/7448/5
 
-import { type EditorState, type Extension, Facet, Transaction } from '@codemirror/state';
+import { type EditorState, type Extension, Transaction } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 
 import { log } from '@dxos/log';
 
-/**
- * Number of lines above/below the cursor to keep visible in the viewport.
- * Defaults to 3.
- */
-export const cursorLineMarginFacet = Facet.define<number, number>({
-  combine: (input) => input[0] ?? 3,
-});
-
 const annotation = 'cursorLineMargin';
 const lineAtPos = (s: EditorState, pos: number) => s.doc.lineAt(pos).number;
 
-// Seems to the best approximation of CM5's `cursorScrollMargin`
-// https://discuss.codemirror.net/t/cursorscrollmargin-for-v6/7448
-export const cursorLineMargin: Extension = EditorView.updateListener.of(
-  ({ transactions, state, selectionSet, startState, view }) => {
+type Options = {
+  lines?: number;
+};
+
+// TODO(burdon): Remove. Buggy and creates scrolling problems. Find better (more general) way to deal with HALO notch.
+export const cursorLineMargin = (options: Options = { lines: 3 }): Extension => {
+  const { lines } = options;
+  if (!lines || lines <= 0) {
+    return [];
+  }
+
+  return EditorView.updateListener.of(({ transactions, state, selectionSet, startState, view }) => {
     // make sure we don't trigger an infinite loop and ignore our own changes
     if (transactions.length < 1 || transactions.some((tr) => tr.isUserEvent(annotation))) {
       return;
@@ -32,7 +32,6 @@ export const cursorLineMargin: Extension = EditorView.updateListener.of(
 
     const s = state;
     const { main } = s.selection;
-    const cursorLineMargin = s.facet(cursorLineMarginFacet);
 
     // editor rect
     const rect = view.dom.getBoundingClientRect();
@@ -59,7 +58,7 @@ export const cursorLineMargin: Extension = EditorView.updateListener.of(
 
     // const needsScrollTop = mainLine <= visTopLine + cursorLineMargin;
     const needsScrollTop = false;
-    const needsScrollBot = mainLine >= visBotLine - cursorLineMargin;
+    const needsScrollBot = mainLine >= visBotLine - lines;
 
     // the scroll margins are overlapping
     if (needsScrollTop && needsScrollBot) {
@@ -88,8 +87,8 @@ export const cursorLineMargin: Extension = EditorView.updateListener.of(
       annotations: Transaction.userEvent.of(annotation),
       effects: EditorView.scrollIntoView(s.selection.main.head, {
         y: needsScrollTop ? 'start' : 'end',
-        yMargin: view.defaultLineHeight * cursorLineMargin,
+        yMargin: view.defaultLineHeight * lines,
       }),
     });
-  },
-);
+  });
+};

package/src/extensions/cursor.ts

@@ -4,7 +4,7 @@
 
 import { type EditorState, Facet } from '@codemirror/state';
 
-import type { Range } from '../hooks';
+import type { Range } from './types';
 
 /**
  * Converts indexes into the text document into stable peer-independent cursors.

package/src/extensions/doc.ts

@@ -0,0 +1,14 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Facet } from '@codemirror/state';
+
+import { invariant } from '@dxos/invariant';
+
+export const documentId = Facet.define<string, string>({
+  combine: (providers) => {
+    invariant(providers.length <= 1);
+    return providers[0];
+  },
+});

package/src/extensions/factories.ts

@@ -0,0 +1,167 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { closeBrackets } from '@codemirror/autocomplete';
+import { history } from '@codemirror/commands';
+import { bracketMatching } from '@codemirror/language';
+import { EditorState, type Extension } from '@codemirror/state';
+import {
+  EditorView,
+  crosshairCursor,
+  drawSelection,
+  dropCursor,
+  highlightActiveLine,
+  lineNumbers,
+  placeholder,
+  scrollPastEnd,
+} from '@codemirror/view';
+import defaultsDeep from 'lodash.defaultsdeep';
+
+import { generateName } from '@dxos/display-name';
+import { type DocAccessor } from '@dxos/echo-schema';
+import { log } from '@dxos/log';
+import { type Space } from '@dxos/react-client/echo';
+import { type Identity } from '@dxos/react-client/halo';
+import { type ThemeMode } from '@dxos/react-ui';
+import { type HuePalette, hueTokens } from '@dxos/react-ui-theme';
+import { hexToHue, isNotFalsy } from '@dxos/util';
+
+import { automerge } from './automerge';
+import { awareness, SpaceAwarenessProvider } from './awareness';
+import { type ThemeStyles } from '../styles';
+import { defaultTheme } from '../themes';
+
+// TODO(burdon): Move into extensions folder.
+
+//
+// Basic
+//
+
+/**
+ * https://codemirror.net/docs/extensions
+ * https://github.com/codemirror/basic-setup
+ */
+// TODO(burdon): Reconcile with createMarkdownExtensions.
+export type BasicExtensionsOptions = {
+  allowMultipleSelections?: boolean;
+  bracketMatching?: boolean;
+  closeBrackets?: boolean;
+  crosshairCursor?: boolean;
+  dropCursor?: boolean;
+  drawSelection?: boolean;
+  editable?: boolean;
+  highlightActiveLine?: boolean;
+  history?: boolean;
+  lineNumbers?: boolean;
+  lineWrapping?: boolean;
+  placeholder?: string;
+  readonly?: boolean;
+  scrollPastEnd?: boolean;
+  tabSize?: number;
+};
+
+const defaults: BasicExtensionsOptions = {
+  bracketMatching: true,
+  closeBrackets: true,
+  drawSelection: true,
+  editable: true,
+  history: true,
+  lineWrapping: true,
+};
+
+export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extension => {
+  const props: BasicExtensionsOptions = defaultsDeep({}, _props, defaults);
+  return [
+    // TODO(burdon): Doesn't catch errors in keymap functions.
+    EditorView.exceptionSink.of((err) => {
+      log.catch(err);
+    }),
+
+    props.allowMultipleSelections && EditorState.allowMultipleSelections.of(true),
+    props.bracketMatching && bracketMatching(),
+    props.closeBrackets && closeBrackets(),
+    props.crosshairCursor && crosshairCursor(),
+    props.dropCursor && dropCursor(),
+    props.drawSelection && drawSelection(),
+    props.highlightActiveLine && highlightActiveLine(),
+    props.history && history(),
+    props.lineNumbers && lineNumbers(),
+    props.lineWrapping && EditorView.lineWrapping,
+    props.placeholder && placeholder(props.placeholder),
+    props.readonly && [EditorState.readOnly.of(true), EditorView.editable.of(false)],
+    props.scrollPastEnd && scrollPastEnd(),
+    props.tabSize && EditorState.tabSize.of(props.tabSize),
+  ].filter(isNotFalsy);
+};
+
+//
+// Theme
+//
+
+export type ThemeExtensionsOptions = {
+  theme?: ThemeStyles;
+  themeMode?: ThemeMode;
+  slots?: {
+    editor?: {
+      className?: string;
+    };
+    content?: {
+      className?: string;
+    };
+  };
+};
+
+const defaultSlots = {
+  editor: {
+    className: 'w-full bs-full',
+  },
+};
+
+export const createThemeExtensions = ({ theme, themeMode, slots: _slots }: ThemeExtensionsOptions = {}): Extension => {
+  const slots = defaultsDeep({}, _slots, defaultSlots);
+  return [
+    EditorView.baseTheme(defaultTheme),
+    EditorView.darkTheme.of(themeMode === 'dark'),
+    theme && EditorView.theme(theme),
+    slots.editor?.className && EditorView.editorAttributes.of({ class: slots.editor.className }),
+    slots.content?.className && EditorView.contentAttributes.of({ class: slots.content.className }),
+  ].filter(isNotFalsy);
+};
+
+//
+// Data
+//
+
+export type DataExtensionsProps = {
+  id: string;
+  text: DocAccessor; // TODO(burdon): Rename content.
+  space?: Space;
+  identity?: Identity | null;
+};
+
+// TODO(burdon): Factor out automerge defs and extension (not hook).
+// TODO(burdon): Move out of react-ui-editor (remove echo deps).
+export const createDataExtensions = ({ id, text, space, identity }: DataExtensionsProps): Extension[] => {
+  const extensions: Extension[] = [automerge(text)];
+
+  if (space && identity) {
+    const peerId = identity?.identityKey.toHex();
+    const { cursorLightValue, cursorDarkValue } =
+      hueTokens[(identity?.profile?.data?.hue as HuePalette | undefined) ?? hexToHue(peerId ?? '0')];
+    const awarenessProvider = new SpaceAwarenessProvider({
+      space,
+      channel: `awareness.${id}`,
+      peerId: identity.identityKey.toHex(),
+      info: {
+        displayName: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
+        color: cursorDarkValue,
+        lightColor: cursorLightValue,
+      },
+    });
+
+    extensions.push(awareness(awarenessProvider));
+  }
+
+  return extensions;
+};

package/src/extensions/index.ts

@@ -11,10 +11,13 @@ export * from './command';
 export * from './comments';
 export * from './cursor';
 export * from './cursor-line-margin';
+export * from './doc';
 export * from './dnd';
+export * from './factories';
 export * from './listener';
 export * from './markdown';
 export * from './mention';
 export * from './modes';
-export * from './outliner';
+export * from './state';
+export * from './types';
 export * from './typewriter';

package/src/extensions/markdown/bundle.ts

@@ -2,51 +2,34 @@
 // Copyright 2023 DXOS.org
 //
 
-import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
-import { history, historyKeymap, indentWithTab, standardKeymap } from '@codemirror/commands';
+import { closeBracketsKeymap } from '@codemirror/autocomplete';
+import { historyKeymap, indentWithTab, standardKeymap } from '@codemirror/commands';
 import { markdownLanguage, markdown } from '@codemirror/lang-markdown';
-import { bracketMatching, defaultHighlightStyle, indentOnInput, syntaxHighlighting } from '@codemirror/language';
+import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
 import { searchKeymap } from '@codemirror/search';
-import { EditorState, type Extension } from '@codemirror/state';
+import { type Extension } from '@codemirror/state';
 import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
-import { EditorView, drawSelection, dropCursor, keymap, placeholder } from '@codemirror/view';
+import { keymap } from '@codemirror/view';
 
 import { type ThemeMode } from '@dxos/react-ui';
-import { isNotFalsy } from '@dxos/util';
 
 import { markdownHighlightStyle, markdownTagsExtensions } from './highlight';
-import { type TextEditorProps } from '../../components';
 
 export type MarkdownBundleOptions = {
   themeMode?: ThemeMode;
-} & Pick<TextEditorProps, 'lineWrapping' | 'placeholder'>;
+};
 
 /**
- * Markdown bundle.
+ * Creates markdown extensions.
+ * To be used in conjunction with createBasicExtensions.
+ *
  * Refs:
  * https://codemirror.net/docs/community
  * https://codemirror.net/docs/ref/#codemirror.basicSetup
  */
-export const createMarkdownExtensions = ({
-  themeMode,
-  placeholder: _placeholder,
-  lineWrapping = true,
-}: MarkdownBundleOptions = {}): Extension[] => {
+export const createMarkdownExtensions = ({ themeMode }: MarkdownBundleOptions = {}): Extension[] => {
   return [
-    // TODO(burdon): Reconcile with createBasicExtensions.
-    lineWrapping && EditorView.lineWrapping,
-    EditorState.allowMultipleSelections.of(true),
-    EditorState.tabSize.of(2),
-
-    bracketMatching(),
-    closeBrackets(),
-    dropCursor(),
-    drawSelection(),
-    history(),
-    indentOnInput(),
-    _placeholder && placeholder(_placeholder),
-
     // Main extension.
     // https://github.com/codemirror/lang-markdown
     // https://codemirror.net/5/mode/markdown/index.html (demo).
@@ -86,5 +69,5 @@ export const createMarkdownExtensions = ({
       // https://codemirror.net/docs/ref/#commands.standardKeymap
       ...standardKeymap,
     ]),
-  ].filter(isNotFalsy);
+  ];
 };

package/src/extensions/markdown/decorate.ts

@@ -48,7 +48,7 @@ class CheckboxWidget extends WidgetType {
 
   override toDOM(view: EditorView) {
     const input = document.createElement('input');
-    input.className = 'cm-task-checkbox';
+    input.className = 'cm-task-checkbox ch-checkbox ch-focus-ring -mbs-0.5';
     input.type = 'checkbox';
     input.checked = this._checked;
     if (view.state.readOnly) {
@@ -148,9 +148,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
                 marks[1].from,
                 node.to,
                 options.renderLinkButton
-                  ? Decoration.replace({
-                      widget: new LinkButton(url, options.renderLinkButton),
-                    })
+                  ? Decoration.replace({ widget: new LinkButton(url, options.renderLinkButton) })
                   : hide,
               );
             }

package/src/extensions/markdown/formatting.test.ts

@@ -9,20 +9,20 @@ import { expect } from 'chai';
 import { describe, test } from '@dxos/test';
 
 import {
-  setHeading,
+  addBlockquote,
+  addCodeblock,
+  addLink,
+  addList,
   addStyle,
+  getFormatting,
   removeStyle,
-  addLink,
   removeLink,
-  addList,
   removeList,
-  addBlockquote,
   removeBlockquote,
-  addCodeblock,
   removeCodeblock,
+  setHeading,
   Inline,
   List,
-  getFormatting,
   type Formatting,
 } from './formatting';
 
@@ -204,22 +204,22 @@ describe('removeStyle', () => {
 });
 
 describe('addLink', () => {
-  testCommand('adds a link', '{}', addLink, '[]({})');
+  testCommand('adds a link', '{}', addLink(), '[]({})');
 
-  testCommand('adds a link around text', 'hello {world}', addLink, 'hello [world]({})');
+  testCommand('adds a link around text', 'hello {world}', addLink(), 'hello [world]({})');
 
-  testCommand('clears existing links', '[hello {world}](foo)', addLink, 'hello [world]({})');
+  testCommand('clears existing links', '[hello {world}](foo)', addLink(), 'hello [world]({})');
 
-  testCommand('does nothing across blocks', '{one\n\ntwo}', addLink, null);
+  testCommand('does nothing across blocks', '{one\n\ntwo}', addLink(), null);
 
-  testCommand('does nothing in code blocks', '```\n{one}\n```', addLink, null);
+  testCommand('does nothing in code blocks', '```\n{one}\n```', addLink(), null);
 
-  testCommand('patches up overlapping styles before', '*foo {bar* baz}', addLink, '*foo* [*bar* baz]({})');
+  testCommand('patches up overlapping styles before', '*foo {bar* baz}', addLink(), '*foo* [*bar* baz]({})');
 
   testCommand(
     'patches up overlapping styles after',
     'one {two ~~three} four~~',
-    addLink,
+    addLink(),
     'one [two ~~three~~]({}) ~~four~~',
   );
 });