@dxos/react-ui-editor 0.4.5-main.f8d6c4e → 0.4.5

package/src/extensions/markdown/link.ts

@@ -4,196 +4,34 @@
 //
 
 import { syntaxTree } from '@codemirror/language';
-import { type Extension, RangeSetBuilder } from '@codemirror/state';
-import {
-  hoverTooltip,
-  Decoration,
-  type DecorationSet,
-  type EditorView,
-  ViewPlugin,
-  type ViewUpdate,
-  WidgetType,
-} from '@codemirror/view';
+import { hoverTooltip } from '@codemirror/view';
 import { type SyntaxNode } from '@lezer/common';
 
 import { tooltipContent } from '@dxos/react-ui-theme';
 
-// Adapted from:
-// https://codemirror.net/try/?c=aW1wb3J0IHsgYmFzaWNTZXR1cCwgRWRpdG9yVmlldyB9IGZyb20gImNvZGVtaXJyb3IiCmltcG9ydCB7IG1hcmtkb3duIH0gZnJvbSAiQGNvZGVtaXJyb3IvbGFuZy1tYXJrZG93biIKaW1wb3J0IHsgc3ludGF4VHJlZSB9IGZyb20gIkBjb2RlbWlycm9yL2xhbmd1YWdlIjsKaW1wb3J0IHsgRWRpdG9yU3RhdGUsIFJhbmdlU2V0QnVpbGRlciwgU3RhdGVGaWVsZCB9IGZyb20gIkBjb2RlbWlycm9yL3N0YXRlIjsKaW1wb3J0IHsgRGVjb3JhdGlvbiwgV2lkZ2V0VHlwZSB9IGZyb20gIkBjb2RlbWlycm9yL3ZpZXciOwoKY2xhc3MgTGluayBleHRlbmRzIFdpZGdldFR5cGUgewogIGNvbnN0cnVjdG9yKHRleHQsIHVybCkgewogICAgc3VwZXIoKQogICAgdGhpcy50ZXh0ID0gdGV4dAogICAgdGhpcy51cmwgPSB1cmwKICB9CiAgZXEob3RoZXIpIHsgcmV0dXJuIHRoaXMudGV4dCA9PSBvdGhlci50ZXh0ICYmIHRoaXMudXJsID09IG90aGVyLnVybCB9CiAgdG9ET00oKSB7CiAgICBsZXQgbGluayA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoImEiKQogICAgbGluay50ZXh0Q29udGVudCA9IHRoaXMudGV4dAogICAgbGluay5ocmVmID0gdGhpcy51cmwKICAgIHJldHVybiBsaW5rOwogIH0KfQoKbGV0IGRlY29yYXRpb25zRmllbGQgPSBTdGF0ZUZpZWxkLmRlZmluZSh7CiAgY3JlYXRlKCkgewogICAgcmV0dXJuIERlY29yYXRpb24ubm9uZTsKICB9LAogIHVwZGF0ZShfLCB0cikgewogICAgY29uc3QgYnVpbGRlciA9IG5ldyBSYW5nZVNldEJ1aWxkZXIoKTsKICAgIGxldCBjdXJzb3IgPSB0ci5zdGF0ZS5zZWxlY3Rpb24ubWFpbi5oZWFkOwogICAgc3ludGF4VHJlZSh0ci5zdGF0ZSkuaXRlcmF0ZSh7CiAgICAgIGVudGVyOiAobm9kZSkgPT4gewogICAgICAgIGlmICgoY3Vyc29yIDwgbm9kZS5mcm9tIHx8IGN1cnNvciA+IG5vZGUudG8pICYmIG5vZGUubmFtZSA9PSAiTGluayIpIHsKICAgICAgICAgIGxldCBtYXJrcyA9IG5vZGUubm9kZS5nZXRDaGlsZHJlbigiTGlua01hcmsiKTsKICAgICAgICAgIGxldCB0ZXh0ID0gbWFya3MubGVuZ3RoID49IDIgPyB0ci5zdGF0ZS5zbGljZURvYyhtYXJrc1swXS50bywgbWFya3NbMV0uZnJvbSkgOiAiIgoKICAgICAgICAgIGxldCB1cmxOb2RlID0gbm9kZS5ub2RlLmdldENoaWxkKCJVUkwiKTsKICAgICAgICAgIGxldCB1cmwgPSB1cmxOb2RlID8gdHIuc3RhdGUuc2xpY2VEb2ModXJsTm9kZS5mcm9tLCB1cmxOb2RlLnRvKSA6ICIiCiAgICAgICAgICBidWlsZGVyLmFkZChub2RlLmZyb20sIG5vZGUudG8sIERlY29yYXRpb24ucmVwbGFjZSh7CiAgICAgICAgICAgIHdpZGdldDogbmV3IExpbmsodGV4dCwgdXJsKSwKICAgICAgICAgIH0pLAogICAgICAgICAgICAgICAgICAgICApOwogICAgICAgICAgcmV0dXJuIGZhbHNlOwogICAgICAgIH0KICAgICAgICByZXR1cm4gdHJ1ZTsKICAgICAgfSwKICAgIH0pOwogICAgcmV0dXJuIGJ1aWxkZXIuZmluaXNoKCk7CiAgfSwKICBwcm92aWRlOiAoZikgPT4gRWRpdG9yVmlldy5kZWNvcmF0aW9ucy5mcm9tKGYpLAp9KTsKCmxldCB2aWV3ID0gbmV3IEVkaXRvclZpZXcoewogIGRvYzogIiMgSGVsbG8gV29ybGRcblxuW1Rlc3RdKGh0dHBzOi8vZXhhbXBsZS5jb20pXG5cblxuIiwKICBleHRlbnNpb25zOiBbZGVjb3JhdGlvbnNGaWVsZCwgbWFya2Rvd24oKV0sCiAgcGFyZW50OiBkb2N1bWVudC5ib2R5LAp9KTsKCnZpZXcuZm9jdXMoKTs=
-// https://discuss.codemirror.net/t/link-widget-is-clicked-only-if-editor-is-out-of-focus/7433
-
-// TODO(burdon): Callback to dynamically lookup title of linked pages.
-export type LinkOptions = {
-  link?: boolean;
-  onHover?: (el: Element, url: string) => void;
-  onRender?: (el: Element, url: string) => void;
-};
-
-/**
- * Creates a state field to replace AST elements with a hyperlink widget.
- * https://codemirror.net/docs/ref/#state.StateField
- */
-export const link = (options: LinkOptions = {}): Extension => {
-  const extensions: Extension[] = [
-    ViewPlugin.fromClass(
-      class {
-        decorations: DecorationSet;
-        constructor(view: EditorView) {
-          this.decorations = buildDecorations(view, options);
-        }
-
-        update(update: ViewUpdate) {
-          if (update.docChanged || update.viewportChanged || update.selectionSet) {
-            this.decorations = buildDecorations(update.view, options);
-          }
-        }
-      },
-      {
-        decorations: (value) => value.decorations,
-      },
-    ),
-  ];
-
-  if (options.onHover) {
-    extensions.push(
-      // https://codemirror.net/examples/tooltip
-      // https://codemirror.net/docs/ref/#view.hoverTooltip
-      // https://github.com/codemirror/view/blob/main/src/tooltip.ts
-      hoverTooltip((view, pos, side) => {
-        const syntax = syntaxTree(view.state).resolveInner(pos, side);
-        let link = null;
-        for (let i = 0, node: SyntaxNode | null = syntax; !link && node && i < 5; node = node.parent, i++) {
-          link = node.name === 'Link' ? node : null;
-        }
-
-        const url = link && link.getChild('URL');
-        if (!url || !link) {
-          return null;
-        }
-
-        const urlText = view.state.sliceDoc(url.from, url.to);
-        return {
-          pos: link.from,
-          end: link.to,
-          above: true,
-          create: () => {
-            const el = document.createElement('div');
-            el.className = tooltipContent({}, 'pli-2 plb-1');
-            options.onHover!(el, urlText);
-            return { dom: el, offset: { x: 0, y: 4 } };
-          },
-        };
-      }),
-    );
-  }
-
-  return extensions;
-};
-
-class LinkButton extends WidgetType {
-  constructor(
-    private readonly _url: string,
-    private readonly _onAttach: LinkOptions['onRender'],
-  ) {
-    super();
-  }
-
-  override eq(other: this) {
-    return this._url === other._url;
-  }
-
-  override toDOM(view: EditorView) {
-    const el = document.createElement('span');
-    this._onAttach!(el, this._url);
-    return el;
-  }
-}
-
-class LinkText extends WidgetType {
-  constructor(
-    private readonly _text: string,
-    private readonly _url?: string,
-  ) {
-    super();
-  }
-
-  override eq(other: this) {
-    return this._url === other._url;
-  }
-
-  override toDOM(view: EditorView) {
-    const link = document.createElement('a');
-    link.setAttribute('class', 'cm-link');
-    link.textContent = this._text;
-    if (this._url) {
-      link.setAttribute('rel', 'noreferrer');
-      link.setAttribute('target', '_blank');
-      link.href = this._url;
-    } else {
-      link.onclick = () => {
-        view.dispatch({
-          selection: {
-            anchor: view.posAtDOM(link),
-          },
-        });
-      };
+export const linkTooltip = (render: (el: Element, url: string) => void) =>
+  hoverTooltip((view, pos, side) => {
+    const syntax = syntaxTree(view.state).resolveInner(pos, side);
+    let link = null;
+    for (let i = 0, node: SyntaxNode | null = syntax; !link && node && i < 5; node = node.parent, i++) {
+      link = node.name === 'Link' ? node : null;
     }
 
-    return link;
-  }
-}
-
-/**
- * Range sets provide a data structure that can hold a collection of tagged,
- * possibly overlapping ranges in such a way that they can efficiently be mapped though document changes.
- * https://codemirror.net/docs/ref/#state
- */
-const buildDecorations = (view: EditorView, options: LinkOptions): DecorationSet => {
-  const builder = new RangeSetBuilder<Decoration>();
-  const { state } = view;
-  const cursor = state.selection.main.head;
-
-  for (const { from, to } of view.visibleRanges) {
-    syntaxTree(state).iterate({
-      enter: (node) => {
-        // Check if cursor is inside text.
-        if (node.name === 'Link') {
-          const marks = node.node.getChildren('LinkMark');
-          const text = marks.length >= 2 ? state.sliceDoc(marks[0].to, marks[1].from) : '';
-          const urlNode = node.node.getChild('URL');
-          const url = urlNode ? state.sliceDoc(urlNode.from, urlNode.to) : '';
-          if (!url) {
-            return false;
-          }
-
-          // TODO(burdon): Don't expand if moving cursor up/down.
-          if (!view.hasFocus || state.readOnly || cursor < node.from || cursor > node.to) {
-            builder.add(
-              node.from,
-              node.to,
-              Decoration.replace({
-                widget: new LinkText(text, options.link ? url : undefined),
-              }),
-            );
-          }
-
-          if (options.onRender) {
-            builder.add(
-              node.to,
-              node.to,
-              Decoration.replace({
-                widget: new LinkButton(url, options.onRender),
-              }),
-            );
-          }
+    const url = link && link.getChild('URL');
+    if (!url || !link) {
+      return null;
+    }
 
-          return false;
-        }
+    const urlText = view.state.sliceDoc(url.from, url.to);
+    return {
+      pos: link.from,
+      end: link.to,
+      above: true,
+      create: () => {
+        const el = document.createElement('div');
+        el.className = tooltipContent({}, 'pli-2 plb-1');
+        render(el, urlText);
+        return { dom: el, offset: { x: 0, y: 4 } };
       },
-      from,
-      to,
-    });
-  }
-
-  return builder.finish();
-};
+    };
+  });

package/src/index.ts

@@ -1,6 +1,7 @@
 //
 // Copyright 2022 DXOS.org
 //
+import translations from './translations';
 
 export { type Extension, type EditorState } from '@codemirror/state';
 export { type EditorView, keymap } from '@codemirror/view';
@@ -20,3 +21,4 @@ export {
 } from './styles';
 export * from './themes';
 export * from './util';
+export { translations };

package/src/styles/layout.ts

@@ -5,7 +5,8 @@
 export const editorWithToolbarLayout =
   'grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden';
 
-export const editorFillLayoutRoot = 'min-bs-full grid';
-export const editorFillLayoutEditor = 'min-bs-full';
+export const editorFillLayoutRoot = 'bs-full overflow-hidden grid';
+export const editorFillLayoutEditor =
+  'bs-full overflow-hidden [&>.cm-scroller]:bs-full [&>.cm-scroller]:overflow-y-auto';
 
 export const editorHalfViewportOverscrollContent = 'after:block after:min-bs-[50dvh] after:pointer-events-none';

package/src/translations.ts

@@ -8,10 +8,11 @@ export default [
   {
     'en-US': {
       [translationKey]: {
-        'strong label': 'Strong',
-        'emphasis label': 'Emphasis',
-        'strikethrough label': 'Strike-through',
+        'strong label': 'Bold',
+        'emphasis label': 'Italics',
+        'strikethrough label': 'Strikethrough',
         'code label': 'Code',
+        'link label': 'Link',
         'list-bullet label': 'Bullet list',
         'list-ordered label': 'Numbered list',
         'list-task label': 'Task list',
@@ -19,6 +20,7 @@ export default [
         'codeblock label': 'Code block',
         'comment label': 'Create comment',
         'heading label': 'Heading level',
+        'table label': 'Create table',
       },
     },
   },

package/dist/types/src/extensions/markdown/code.d.ts

@@ -1,2 +0,0 @@
-export declare const code: () => import("@codemirror/state").Extension[];
-//# sourceMappingURL=code.d.ts.map

package/dist/types/src/extensions/markdown/code.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"code.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/markdown/code.ts"],"names":[],"mappings":"AA8IA,eAAO,MAAM,IAAI,+CAmBhB,CAAC"}

package/dist/types/src/extensions/markdown/heading.d.ts

@@ -1,6 +0,0 @@
-import { type DecorationSet, ViewPlugin, type ViewUpdate } from '@codemirror/view';
-export declare const heading: () => ViewPlugin<{
-    decorations: DecorationSet;
-    update(update: ViewUpdate): void;
-}>[];
-//# sourceMappingURL=heading.d.ts.map

package/dist/types/src/extensions/markdown/heading.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/markdown/heading.ts"],"names":[],"mappings":"AAMA,OAAO,EAAc,KAAK,aAAa,EAAmB,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAkChH,eAAO,MAAM,OAAO;;mBASG,UAAU;IAShC,CAAC"}

package/dist/types/src/extensions/markdown/hr.d.ts

@@ -1,2 +0,0 @@
-export declare const hr: () => import("@codemirror/state").Extension[];
-//# sourceMappingURL=hr.d.ts.map

package/dist/types/src/extensions/markdown/hr.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"hr.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/markdown/hr.ts"],"names":[],"mappings":"AAmDA,eAAO,MAAM,EAAE,+CAmBd,CAAC"}

package/dist/types/src/extensions/markdown/tasklist.d.ts

@@ -1,3 +0,0 @@
-export type TasklistOptions = {};
-export declare const tasklist: (options?: TasklistOptions) => import("@codemirror/state").Extension[];
-//# sourceMappingURL=tasklist.d.ts.map

package/dist/types/src/extensions/markdown/tasklist.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tasklist.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/markdown/tasklist.ts"],"names":[],"mappings":"AAsFA,MAAM,MAAM,eAAe,GAAG,EAAE,CAAC;AAEjC,eAAO,MAAM,QAAQ,aAAa,eAAe,4CAqBhD,CAAC"}

package/src/extensions/markdown/code.ts

@@ -1,162 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { syntaxTree } from '@codemirror/language';
-import { RangeSetBuilder } from '@codemirror/state';
-import {
-  ViewPlugin,
-  type DecorationSet,
-  EditorView,
-  type ViewUpdate,
-  Decoration,
-  type BlockInfo,
-  WidgetType,
-} from '@codemirror/view';
-
-import { mx } from '@dxos/react-ui-theme';
-
-import { getToken } from '../../styles';
-
-// TODO(burdon): Reconcile with theme.
-const styles = EditorView.baseTheme({
-  '& .cm-code': {
-    fontFamily: getToken('fontFamily.mono', []).join(','),
-  },
-  '& .cm-codeblock-line': {
-    paddingInline: '1rem !important',
-  },
-
-  '& .cm-codeblock-end': {
-    display: 'inline-block',
-    width: '100%',
-    position: 'relative',
-    '&::after': {
-      position: 'absolute',
-      inset: 0,
-      content: '""',
-    },
-  },
-  '& .cm-codeblock-first': {
-    '&::after': {
-      borderTopLeftRadius: '.5rem',
-      borderTopRightRadius: '.5rem',
-    },
-  },
-  '& .cm-codeblock-last': {
-    '&::after': {
-      borderBottomLeftRadius: '.5rem',
-      borderBottomRightRadius: '.5rem',
-    },
-  },
-
-  '&light .cm-codeblock-line, &light .cm-activeLine.cm-codeblock-line': {
-    background: getToken('extend.semanticColors.input.light'),
-    mixBlendMode: 'darken',
-  },
-  '&dark .cm-codeblock-line, &dark .cm-activeLine.cm-codeblock-line': {
-    background: getToken('extend.semanticColors.input.dark'),
-    mixBlendMode: 'lighten',
-  },
-  '&light .cm-codeblock-first, &light .cm-codeblock-last': {
-    mixBlendMode: 'darken',
-    '&::after': {
-      background: getToken('extend.semanticColors.input.light'),
-    },
-  },
-  '&dark .cm-codeblock-first, &dark .cm-codeblock-last': {
-    mixBlendMode: 'lighten',
-    '&::after': {
-      background: getToken('extend.semanticColors.input.dark'),
-    },
-  },
-});
-
-// TODO(burdon): Start from EditorView.lineBlockAt(pos).
-const getLineRange = (lines: BlockInfo[], from: number, to: number) => {
-  const start = lines.findIndex((line) => line.from >= from);
-  const end = lines.findIndex((line) => line.to >= to);
-  return [start, end];
-};
-
-/**
- * Widget for first/last line of code block (read-only).
- */
-// TODO(burdon): Add copy-to-clipboard button.
-class LineWidget extends WidgetType {
-  constructor(private readonly _className: string) {
-    super();
-  }
-
-  override toDOM() {
-    const el = document.createElement('span');
-    el.innerHTML = ' ';
-    el.className = mx('cm-code cm-codeblock', this._className);
-    return el;
-  }
-}
-
-const top = new LineWidget('cm-codeblock-end cm-codeblock-first');
-const bottom = new LineWidget('cm-codeblock-end cm-codeblock-last');
-
-const buildDecorations = (view: EditorView): DecorationSet => {
-  const builder = new RangeSetBuilder<Decoration>();
-  const { state } = view;
-  const blocks = view.viewportLineBlocks;
-  const cursor = state.selection.main.head;
-
-  for (const { from, to } of view.visibleRanges) {
-    syntaxTree(state).iterate({
-      enter: (node) => {
-        if (node.name === 'FencedCode') {
-          // FencedCode > CodeMark > [CodeInfo] > CodeText > CodeMark
-          const editing = !view.state.readOnly && cursor >= node.from && cursor <= node.to;
-          const range = getLineRange(blocks, node.from, node.to);
-          for (let i = range[0]; i <= range[1]; i++) {
-            const block = blocks[i];
-            if (!editing && (i === range[0] || i === range[1])) {
-              builder.add(block.from, block.to, Decoration.replace({ widget: i === range[0] ? top : bottom }));
-            } else {
-              builder.add(
-                block.from,
-                block.from,
-                Decoration.line({
-                  class: mx(
-                    'cm-code cm-codeblock-line',
-                    i === range[0] && 'cm-codeblock-first',
-                    i === range[1] && 'cm-codeblock-last',
-                  ),
-                }),
-              );
-            }
-          }
-        }
-      },
-      from,
-      to,
-    });
-  }
-
-  return builder.finish();
-};
-
-export const code = () => {
-  return [
-    ViewPlugin.fromClass(
-      class {
-        decorations: DecorationSet;
-        constructor(view: EditorView) {
-          this.decorations = buildDecorations(view);
-        }
-
-        update(update: ViewUpdate) {
-          this.decorations = buildDecorations(update.view);
-        }
-      },
-      {
-        decorations: (value) => value.decorations,
-      },
-    ),
-    styles,
-  ];
-};

package/src/extensions/markdown/heading.ts

@@ -1,59 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { syntaxTree } from '@codemirror/language';
-import { RangeSetBuilder } from '@codemirror/state';
-import { Decoration, type DecorationSet, type EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
-
-const buildDecorations = (view: EditorView): DecorationSet => {
-  const builder = new RangeSetBuilder<Decoration>();
-  const { state } = view;
-  const cursor = state.selection.main.head;
-
-  for (const { from, to } of view.visibleRanges) {
-    syntaxTree(state).iterate({
-      enter: (node) => {
-        switch (node.name) {
-          case 'ATXHeading1':
-          case 'ATXHeading2':
-          case 'ATXHeading3':
-          case 'ATXHeading4':
-          case 'ATXHeading5':
-          case 'ATXHeading6': {
-            const mark = node.node.getChild('HeaderMark');
-            if (mark) {
-              if (!view.hasFocus || view.state.readOnly || cursor < node.from || cursor > node.to) {
-                builder.add(mark.from, mark.to + 1, Decoration.replace({}));
-              }
-            }
-          }
-        }
-      },
-      from,
-      to,
-    });
-  }
-
-  return builder.finish();
-};
-
-export const heading = () => {
-  return [
-    ViewPlugin.fromClass(
-      class {
-        decorations: DecorationSet;
-        constructor(view: EditorView) {
-          this.decorations = buildDecorations(view);
-        }
-
-        update(update: ViewUpdate) {
-          this.decorations = buildDecorations(update.view);
-        }
-      },
-      {
-        decorations: (value) => value.decorations,
-      },
-    ),
-  ];
-};

package/src/extensions/markdown/hr.ts

@@ -1,71 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { syntaxTree } from '@codemirror/language';
-import { RangeSetBuilder } from '@codemirror/state';
-import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate, WidgetType } from '@codemirror/view';
-
-import { getToken } from '../../styles';
-
-// TODO(burdon): Reconcile with theme.
-const styles = EditorView.baseTheme({
-  '& .cm-hr': {
-    // Note that block-level decorations should not have vertical margins,
-    borderTop: `1px solid ${getToken('extend.colors.neutral.200')}`,
-  },
-});
-
-class HorizontalRuleWidget extends WidgetType {
-  override toDOM() {
-    const el = document.createElement('div');
-    el.className = 'cm-hr';
-    return el;
-  }
-}
-
-const decoration = Decoration.replace({ widget: new HorizontalRuleWidget() });
-
-const buildDecorations = (view: EditorView): DecorationSet => {
-  const builder = new RangeSetBuilder<Decoration>();
-  const { state } = view;
-  const cursor = state.selection.main.head;
-
-  for (const { from, to } of view.visibleRanges) {
-    syntaxTree(state).iterate({
-      enter: (node) => {
-        if (node.name === 'HorizontalRule') {
-          // Check if cursor is inside text.
-          if (cursor <= node.from || cursor >= node.to) {
-            builder.add(node.from, node.to, decoration);
-          }
-        }
-      },
-      from,
-      to,
-    });
-  }
-
-  return builder.finish();
-};
-
-export const hr = () => {
-  return [
-    ViewPlugin.fromClass(
-      class {
-        decorations: DecorationSet;
-        constructor(view: EditorView) {
-          this.decorations = buildDecorations(view);
-        }
-
-        update(update: ViewUpdate) {
-          this.decorations = buildDecorations(update.view);
-        }
-      },
-      {
-        decorations: (value) => value.decorations,
-      },
-    ),
-    styles,
-  ];
-};