@dxos/react-ui-editor 0.3.3-main.052ad73

package/dist/lib/browser/index.mjs

@@ -0,0 +1,883 @@
+// packages/ui/react-ui-editor/src/components/Composer/Composer.tsx
+import React3, { forwardRef as forwardRef3, memo } from "react";
+import { YXmlFragment } from "@dxos/text-model";
+
+// packages/ui/react-ui-editor/src/model.ts
+import { useMemo } from "react";
+
+// packages/ui/react-ui-editor/src/yjs/cursors.ts
+import * as random from "lib0/random";
+var cursorColors = [
+  {
+    color: "#30bced",
+    light: "#30bced33"
+  },
+  {
+    color: "#6eeb83",
+    light: "#6eeb8333"
+  },
+  {
+    color: "#ffbc42",
+    light: "#ffbc4233"
+  },
+  {
+    color: "#ecd444",
+    light: "#ecd44433"
+  },
+  {
+    color: "#ee6352",
+    light: "#ee635233"
+  },
+  {
+    color: "#9ac2c9",
+    light: "#9ac2c933"
+  },
+  {
+    color: "#8acb88",
+    light: "#8acb8833"
+  },
+  {
+    color: "#1be7ff",
+    light: "#1be7ff33"
+  }
+];
+var cursorColor = cursorColors[random.uint32() % cursorColors.length];
+
+// packages/ui/react-ui-editor/src/yjs/space-provider.ts
+import * as decoding from "lib0/decoding";
+import * as encoding from "lib0/encoding";
+import { Observable } from "lib0/observable";
+import * as awarenessProtocol from "y-protocols/awareness";
+import { log } from "@dxos/log";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/yjs/space-provider.ts";
+var messageAwareness = 1;
+var messageQueryAwareness = 3;
+var SpaceAwarenessProvider = class extends Observable {
+  constructor({ space, doc, channel, awareness }) {
+    super();
+    this._space = space;
+    this._awareness = awareness ?? new awarenessProtocol.Awareness(doc);
+    this._channel = channel;
+    this._clientId = doc.clientID;
+    this._awareness.on("update", this._handleAwarenessUpdate.bind(this));
+    this._space.listen(this._channel, this._handleSpaceMessage.bind(this));
+    if (typeof window !== "undefined") {
+      window.addEventListener("beforeunload", this._handleBeforeUnload.bind(this));
+    } else if (typeof process !== "undefined") {
+      process.on("exit", this._handleBeforeUnload.bind(this));
+    }
+    const encoderAwarenessQuery = encoding.createEncoder();
+    encoding.writeVarUint(encoderAwarenessQuery, messageQueryAwareness);
+    void this._space.postMessage(this._channel, encoding.toUint8Array(encoderAwarenessQuery));
+    const encoderAwarenessState = encoding.createEncoder();
+    encoding.writeVarUint(encoderAwarenessState, messageAwareness);
+    encoding.writeVarUint8Array(encoderAwarenessState, awarenessProtocol.encodeAwarenessUpdate(this.awareness, [
+      this._clientId
+    ]));
+    void this._space.postMessage(this._channel, encoding.toUint8Array(encoderAwarenessState));
+  }
+  get awareness() {
+    return this._awareness;
+  }
+  _handleAwarenessUpdate({ added, updated, removed }, origin) {
+    log("awareness update", {
+      added,
+      updated,
+      removed,
+      origin
+    }, {
+      F: __dxlog_file,
+      L: 67,
+      S: this,
+      C: (f, a) => f(...a)
+    });
+    const changedClients = added.concat(updated).concat(removed);
+    const encoderAwareness = encoding.createEncoder();
+    encoding.writeVarUint(encoderAwareness, messageAwareness);
+    encoding.writeVarUint8Array(encoderAwareness, awarenessProtocol.encodeAwarenessUpdate(this._awareness, changedClients));
+    void this._space.postMessage(this._channel, encoding.toUint8Array(encoderAwareness));
+  }
+  _handleSpaceMessage({ payload }) {
+    log("space message", payload, {
+      F: __dxlog_file,
+      L: 79,
+      S: this,
+      C: (f, a) => f(...a)
+    });
+    const data = new Uint8Array(Array.from(Object.values(payload)));
+    const encoder = this._readMessage(data);
+    if (encoder) {
+      void this._space.postMessage(this._channel, encoding.toUint8Array(encoder));
+    }
+  }
+  _readMessage(message) {
+    const decoder = decoding.createDecoder(message);
+    const encoder = encoding.createEncoder();
+    const messageType = decoding.readVarUint(decoder);
+    let sendReply = false;
+    switch (messageType) {
+      case messageAwareness: {
+        awarenessProtocol.applyAwarenessUpdate(this._awareness, decoding.readVarUint8Array(decoder), this);
+        break;
+      }
+      case messageQueryAwareness: {
+        encoding.writeVarUint(encoder, messageAwareness);
+        encoding.writeVarUint8Array(encoder, awarenessProtocol.encodeAwarenessUpdate(this._awareness, Array.from(this._awareness.getStates().keys())));
+        sendReply = true;
+        break;
+      }
+      default: {
+        console.error("Invalid message:", messageType);
+        return encoder;
+      }
+    }
+    if (!sendReply) {
+      return null;
+    }
+    return encoder;
+  }
+  _handleBeforeUnload() {
+    awarenessProtocol.removeAwarenessStates(this._awareness, [
+      this._clientId
+    ], "window unload");
+  }
+};
+
+// packages/ui/react-ui-editor/src/model.ts
+var useTextModel = ({ identity, space, text }) => {
+  const provider = useMemo(() => {
+    if (!space || !text?.doc) {
+      return void 0;
+    }
+    return new SpaceAwarenessProvider({
+      space,
+      doc: text.doc,
+      channel: `yjs.awareness.${text.id}`
+    });
+  }, [
+    identity,
+    space,
+    text?.doc
+  ]);
+  if (!text?.doc || !text?.content) {
+    return void 0;
+  }
+  return {
+    id: text.doc.guid,
+    content: text.content,
+    provider,
+    peer: identity ? {
+      id: identity.identityKey.toHex(),
+      name: identity.profile?.displayName
+    } : void 0
+  };
+};
+
+// packages/ui/react-ui-editor/src/components/Markdown/Markdown.tsx
+import { autocompletion, completionKeymap, closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
+import { defaultKeymap, history, historyKeymap, indentWithTab } from "@codemirror/commands";
+import { markdown, markdownLanguage as markdownLanguage2 } from "@codemirror/lang-markdown";
+import { bracketMatching, defaultHighlightStyle, foldKeymap, indentOnInput, syntaxHighlighting } from "@codemirror/language";
+import { languages } from "@codemirror/language-data";
+import { lintKeymap } from "@codemirror/lint";
+import { searchKeymap, highlightSelectionMatches } from "@codemirror/search";
+import { EditorState, StateField } from "@codemirror/state";
+import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
+import { keymap, crosshairCursor, drawSelection, dropCursor, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, placeholder, rectangularSelection, EditorView } from "@codemirror/view";
+import { useFocusableGroup } from "@fluentui/react-tabster";
+import { vim } from "@replit/codemirror-vim";
+import React, { forwardRef, useEffect, useImperativeHandle, useState, useMemo as useMemo2, useCallback } from "react";
+import { yCollab } from "y-codemirror.next";
+import { generateName } from "@dxos/display-name";
+import { useThemeContext } from "@dxos/react-ui";
+import { configColors } from "@dxos/react-ui-theme";
+import { YText } from "@dxos/text-model";
+
+// packages/ui/react-ui-editor/src/components/Markdown/markdownTags.ts
+import { styleTags, Tag } from "@lezer/highlight";
+var markdownTags = {
+  headingMark: Tag.define(),
+  quoteMark: Tag.define(),
+  listMark: Tag.define(),
+  linkMark: Tag.define(),
+  emphasisMark: Tag.define(),
+  codeMark: Tag.define(),
+  codeText: Tag.define(),
+  inlineCode: Tag.define(),
+  url: Tag.define(),
+  linkReference: Tag.define(),
+  linkLabel: Tag.define()
+};
+var markdownTagsExtension = {
+  props: [
+    styleTags({
+      HeaderMark: markdownTags.headingMark,
+      QuoteMark: markdownTags.quoteMark,
+      ListMark: markdownTags.listMark,
+      LinkMark: markdownTags.linkMark,
+      EmphasisMark: markdownTags.emphasisMark,
+      CodeMark: markdownTags.codeMark,
+      CodeText: markdownTags.codeText,
+      InlineCode: markdownTags.inlineCode,
+      URL: markdownTags.url,
+      LinkReference: markdownTags.linkReference,
+      LinkLabel: markdownTags.linkLabel
+    })
+  ]
+};
+
+// packages/ui/react-ui-editor/src/components/Markdown/markdownTheme.ts
+import { markdownLanguage } from "@codemirror/lang-markdown";
+import { HighlightStyle } from "@codemirror/language";
+import { tags } from "@lezer/highlight";
+import get from "lodash.get";
+
+// packages/ui/react-ui-editor/src/styles/markdown.ts
+import { mx } from "@dxos/react-ui-theme";
+var heading = {
+  1: "mbs-4 mbe-2 text-4xl font-semibold text-inherit no-underline",
+  2: "mbs-4 mbe-2 text-3xl font-bold text-inherit no-underline",
+  3: "mbs-4 mbe-2 text-2xl font-bold text-inherit no-underline",
+  4: "mbs-4 mbe-2 text-xl font-extrabold text-inherit no-underline",
+  5: "mbs-4 mbe-2 text-lg font-extrabold text-inherit no-underline",
+  6: "mbs-4 mbe-2 font-black text-inherit no-underline"
+};
+var blockquote = "mlb-2 border-is-4 border-neutral-500/50 pis-5";
+var unorderedList = "mlb-2 grid grid-cols-[min-content_1fr] [&>li:before]:content-[attr(marker)] [&>li:before]:mlb-1 [&>li:before]:mie-2";
+var orderedList = 'mlb-2 grid grid-cols-[min-content_1fr]  [&>li:before]:content-[counters(section,_".")_"._"] [counter-reset:section] [&>li:before]:mlb-1';
+var listItem = "contents before:[counter-increment:section]";
+var codeBlock = "mlb-2 font-mono bg-neutral-500/10 p-3 rounded";
+var horizontalRule = "mlb-4 border-neutral-500/50";
+var paragraph = "mlb-1";
+var bold = "font-bold";
+var code = "font-mono bg-neutral-500/10 rounded pli-0.5 plb-0.5 -mlb-0.5";
+var codeWithoutMarks = mx(code, "pli-1.5 mli-0.5");
+var italic = "italic";
+var strikethrough = "line-through";
+var mark = "!font-normal !no-underline !text-inherit opacity-40";
+
+// packages/ui/react-ui-editor/src/styles/tokens.ts
+import { tailwindConfig } from "@dxos/react-ui-theme";
+var tokens = tailwindConfig({}).theme;
+
+// packages/ui/react-ui-editor/src/components/Markdown/markdownTheme.ts
+var ivory = "#abb2bf";
+var malibu = "#61afef";
+var highlightBackground = "#2c313a";
+var tooltipBackground = "#353a42";
+var cursor = "#ffffff";
+var monospace = get(tokens, "fontFamily.mono", [
+  "monospace"
+]).join(",");
+var markdownTheme = {
+  // TODO(thure): consider whether these commented-out rules from one-dark-theme should be integrated.
+  // '&': {
+  //   color: ivory,
+  //   backgroundColor: background
+  // },
+  // '.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
+  // '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
+  //   backgroundColor: selection
+  // },
+  // '.cm-panels': { backgroundColor: darkBackground, color: ivory },
+  // '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
+  // '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
+  // '.cm-searchMatch': {
+  //   backgroundColor: '#72a1ff59',
+  //   outline: '1px solid #457dff'
+  // },
+  // '.cm-searchMatch.cm-searchMatch-selected': {
+  //   backgroundColor: '#6199ff2f'
+  // },
+  // '.cm-activeLine': { backgroundColor: '#6699ff0b' },
+  // '.cm-selectionMatch': { backgroundColor: '#aafe661a' },
+  // '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
+  //   backgroundColor: '#bad0f847'
+  // },
+  // '.cm-gutters': {
+  //   backgroundColor: background,
+  //   color: stone,
+  //   border: 'none'
+  // },
+  // '.cm-activeLineGutter': {
+  //   backgroundColor: highlightBackground
+  // },
+  // '.cm-foldPlaceholder': {
+  //   backgroundColor: 'transparent',
+  //   border: 'none',
+  //   color: '#ddd'
+  // },
+  ".dark & .cm-tooltip": {
+    border: "none",
+    backgroundColor: tooltipBackground
+  },
+  ".dark & .cm-tooltip .cm-tooltip-arrow:before": {
+    borderTopColor: "transparent",
+    borderBottomColor: "transparent"
+  },
+  ".dark & .cm-tooltip .cm-tooltip-arrow:after": {
+    borderTopColor: tooltipBackground,
+    borderBottomColor: tooltipBackground
+  },
+  ".dark & .cm-tooltip-autocomplete": {
+    "& > ul > li[aria-selected]": {
+      backgroundColor: highlightBackground,
+      color: ivory
+    }
+  },
+  "&.cm-focused": {
+    outline: "none"
+  },
+  "& .cm-line": {
+    paddingInline: 0
+  },
+  "& .cm-line *": {
+    lineHeight: 1.6
+  },
+  "& .cm-selectionBackground": {
+    background: get(tokens, "extend.colors.primary.150", "#00ffff") + "aa"
+  },
+  ".dark & .cm-selectionBackground": {
+    background: get(tokens, "extend.colors.primary.500", "#00ffff") + "aa"
+  },
+  "& .cm-selectionMatch": {
+    background: get(tokens, "extend.colors.primary.100", "#00ffff") + "44"
+  },
+  ".dark & .cm-selectionMatch": {
+    background: get(tokens, "extend.colors.primary.400", "#00ffff") + "44"
+  },
+  "& .cm-content": {
+    caretColor: "black"
+  },
+  ".dark & .cm-content": {
+    caretColor: cursor
+  },
+  "& .cm-cursor": {
+    borderLeftColor: "black"
+  },
+  ".dark & .cm-cursor": {
+    borderLeftColor: cursor
+  },
+  ".cm-placeholder": {
+    fontFamily: get(tokens, "fontFamily.body", []).join(",")
+  },
+  "& .cm-scroller": {
+    fontFamily: get(tokens, "fontFamily.mono", []).join(",")
+  },
+  "& .cm-activeLine": {
+    backgroundColor: "transparent"
+  },
+  ".dark & .cm-activeLine": {
+    backgroundColor: "transparent"
+  },
+  "& .cm-ySelectionInfo": {
+    fontFamily: get(tokens, "fontFamily.body", []).join(","),
+    padding: "2px 4px",
+    marginBlockStart: "-4px"
+  },
+  "& .cm-ySelection": {
+    display: "inline-block"
+  },
+  "& .cm-ySelectionCaret": {
+    display: "inline-block",
+    verticalAlign: "top"
+  },
+  ...Object.keys(get(tokens, "extend.fontSize", {})).reduce((acc, fontSize) => {
+    const height = get(tokens, [
+      "extend",
+      "fontSize",
+      fontSize,
+      1,
+      "lineHeight"
+    ]);
+    acc[`& .text-${fontSize} + .cm-ySelectionCaret`] = {
+      height
+    };
+    acc[`& .text-${fontSize} + .cm-ySelection + .cm-ySelectionCaret`] = {
+      height
+    };
+    acc[`& .text-${fontSize} + .cm-widgetBuffer + .cm-ySelectionCaret`] = {
+      height
+    };
+    return acc;
+  }, {})
+};
+var markdownDarkHighlighting = HighlightStyle.define([
+  {
+    tag: [
+      tags.keyword,
+      tags.name,
+      tags.deleted,
+      tags.character,
+      tags.propertyName,
+      tags.macroName,
+      tags.color,
+      tags.constant(tags.name),
+      tags.standard(tags.name),
+      tags.definition(tags.name),
+      tags.separator,
+      tags.typeName,
+      tags.className,
+      tags.number,
+      tags.changed,
+      tags.annotation,
+      tags.modifier,
+      tags.self,
+      tags.namespace,
+      tags.operator,
+      tags.operatorKeyword,
+      tags.escape,
+      tags.regexp,
+      tags.special(tags.string),
+      tags.meta,
+      tags.comment,
+      tags.atom,
+      tags.bool,
+      tags.special(tags.variableName),
+      tags.processingInstruction,
+      tags.string,
+      tags.inserted,
+      tags.invalid
+    ],
+    color: "inherit !important"
+  },
+  {
+    tag: [
+      tags.link,
+      tags.url
+    ],
+    color: "inherit !important",
+    textDecoration: "none !important"
+  },
+  {
+    tag: [
+      tags.function(tags.variableName),
+      tags.labelName
+    ],
+    color: malibu,
+    fontFamily: monospace
+  },
+  {
+    tag: [
+      markdownTags.codeMark,
+      markdownTags.emphasisMark,
+      markdownTags.headingMark,
+      markdownTags.linkLabel,
+      markdownTags.linkReference,
+      markdownTags.listMark,
+      markdownTags.quoteMark,
+      markdownTags.url,
+      tags.meta,
+      tags.processingInstruction
+    ],
+    class: mark
+  },
+  {
+    tag: [
+      markdownTags.codeText,
+      markdownTags.inlineCode
+    ],
+    class: "font-mono"
+  },
+  {
+    tag: tags.emphasis,
+    class: italic
+  },
+  {
+    tag: tags.heading1,
+    class: heading[1]
+  },
+  {
+    tag: tags.heading2,
+    class: heading[2]
+  },
+  {
+    tag: tags.heading3,
+    class: heading[3]
+  },
+  {
+    tag: tags.heading4,
+    class: heading[4]
+  },
+  {
+    tag: tags.heading5,
+    class: heading[5]
+  },
+  {
+    tag: tags.heading6,
+    class: heading[6]
+  },
+  {
+    tag: tags.strikethrough,
+    class: strikethrough
+  },
+  {
+    tag: tags.strong,
+    class: bold
+  }
+], {
+  scope: markdownLanguage,
+  all: {
+    fontFamily: get(tokens, "fontFamily.body", []).join(",")
+  }
+});
+
+// packages/ui/react-ui-editor/src/components/Markdown/Markdown.tsx
+var EditorModes = [
+  "default",
+  "vim"
+];
+var hexadecimalPaletteSeries = [
+  "red",
+  "orange",
+  "amber",
+  "yellow",
+  "lime",
+  "green",
+  "emerald",
+  "teal",
+  "cyan",
+  "sky",
+  "indigo",
+  "violet",
+  "purple",
+  "fuchsia",
+  "pink",
+  "rose"
+];
+var shadeKeys = {
+  color: "450",
+  highlightDark: "800",
+  highlightLight: "100"
+};
+var MarkdownComposer = /* @__PURE__ */ forwardRef(({ model, slots = {}, onChange, editorMode }, forwardedRef) => {
+  const { id, content, provider, peer } = model ?? {};
+  const { themeMode } = useThemeContext();
+  const tabsterDOMAttribute = useFocusableGroup({
+    tabBehavior: "limited"
+  });
+  const [parent, setParent] = useState(null);
+  const [state, setState] = useState();
+  const [view, setView] = useState();
+  useImperativeHandle(forwardedRef, () => ({
+    editor: parent,
+    state,
+    view
+  }));
+  const listenChangesExtension = useMemo2(() => StateField.define({
+    create: () => null,
+    update: (_value, transaction) => {
+      if (transaction.docChanged && onChange) {
+        onChange(transaction.newDoc);
+      }
+      return null;
+    }
+  }), [
+    onChange
+  ]);
+  useEffect(() => {
+    if (provider && peer) {
+      let peerColorDigit = Math.floor(16 * Math.random());
+      try {
+        peerColorDigit = parseInt(peer.id.slice(-1), 16);
+      } catch (_) {
+      }
+      provider.awareness.setLocalStateField("user", {
+        name: peer.name ?? generateName(peer.id),
+        color: configColors[hexadecimalPaletteSeries[peerColorDigit]][shadeKeys.color],
+        colorLight: configColors[hexadecimalPaletteSeries[peerColorDigit]][shadeKeys[themeMode === "dark" ? "highlightDark" : "highlightLight"]]
+      });
+    }
+  }, [
+    provider,
+    peer,
+    themeMode
+  ]);
+  useEffect(() => {
+    if (!parent) {
+      return;
+    }
+    const state2 = EditorState.create({
+      doc: content?.toString(),
+      extensions: [
+        // Based on https://github.com/codemirror/dev/issues/44#issuecomment-789093799.
+        listenChangesExtension,
+        ...editorMode === "vim" ? [
+          vim()
+        ] : [],
+        // All of https://github.com/codemirror/basic-setup minus line numbers and fold gutter.
+        highlightActiveLineGutter(),
+        highlightSpecialChars(),
+        history(),
+        drawSelection(),
+        dropCursor(),
+        EditorState.allowMultipleSelections.of(true),
+        indentOnInput(),
+        syntaxHighlighting(defaultHighlightStyle, {
+          fallback: true
+        }),
+        bracketMatching(),
+        closeBrackets(),
+        autocompletion(),
+        rectangularSelection(),
+        crosshairCursor(),
+        highlightActiveLine(),
+        highlightSelectionMatches(),
+        placeholder(slots.editor?.placeholder ?? ""),
+        keymap.of([
+          ...closeBracketsKeymap,
+          ...defaultKeymap,
+          ...searchKeymap,
+          ...historyKeymap,
+          ...foldKeymap,
+          ...completionKeymap,
+          ...lintKeymap,
+          indentWithTab
+        ]),
+        EditorView.lineWrapping,
+        // Theme
+        markdown({
+          base: markdownLanguage2,
+          codeLanguages: languages,
+          extensions: [
+            markdownTagsExtension
+          ]
+        }),
+        EditorView.theme({
+          ...markdownTheme,
+          ...slots.editor?.markdownTheme
+        }),
+        ...themeMode === "dark" ? [
+          syntaxHighlighting(oneDarkHighlightStyle)
+        ] : [
+          syntaxHighlighting(defaultHighlightStyle)
+        ],
+        // TODO(thure): All but one rule here apply to both themes; rename or refactor.
+        syntaxHighlighting(markdownDarkHighlighting),
+        // Collaboration
+        ...content instanceof YText ? [
+          yCollab(content, provider?.awareness)
+        ] : []
+      ]
+    });
+    setState(state2);
+    view?.destroy();
+    setView(new EditorView({
+      state: state2,
+      parent
+    }));
+    return () => {
+      view?.destroy();
+      setView(void 0);
+      setState(void 0);
+    };
+  }, [
+    parent,
+    content,
+    provider?.awareness,
+    themeMode,
+    editorMode
+  ]);
+  const handleKeyUp = useCallback(({ key, altKey, shiftKey, metaKey, ctrlKey }) => {
+    switch (key) {
+      case "Enter":
+        view?.contentDOM.focus();
+        break;
+      case "Escape":
+        editorMode === "vim" && (altKey || shiftKey || metaKey || ctrlKey) && parent?.focus();
+        break;
+    }
+  }, [
+    view,
+    editorMode
+  ]);
+  return /* @__PURE__ */ React.createElement("div", {
+    tabIndex: 0,
+    key: id,
+    ...slots.root,
+    onKeyUp: handleKeyUp,
+    ...editorMode !== "vim" ? tabsterDOMAttribute : {},
+    ref: setParent
+  });
+});
+
+// packages/ui/react-ui-editor/src/components/RichText/RichText.tsx
+import { mergeAttributes } from "@tiptap/core";
+import Collaboration from "@tiptap/extension-collaboration";
+import CollaborationCursor from "@tiptap/extension-collaboration-cursor";
+import Heading from "@tiptap/extension-heading";
+import ListItem from "@tiptap/extension-list-item";
+import Placeholder from "@tiptap/extension-placeholder";
+import { EditorContent, useEditor as useNaturalEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import React2, { forwardRef as forwardRef2, useImperativeHandle as useImperativeHandle2, useMemo as useMemo3 } from "react";
+import { generateName as generateName2 } from "@dxos/display-name";
+import { mx as mx2 } from "@dxos/react-ui-theme";
+var useEditor = ({ model, placeholder: placeholder2 = "Enter text\u2026", slots = {} }) => {
+  const extensions = useMemo3(() => [
+    StarterKit.configure({
+      // Extensions
+      history: false,
+      // Nodes
+      blockquote: {
+        HTMLAttributes: {
+          class: blockquote
+        }
+      },
+      bulletList: {
+        HTMLAttributes: {
+          class: unorderedList
+        }
+      },
+      codeBlock: {
+        HTMLAttributes: {
+          class: codeBlock
+        }
+      },
+      heading: false,
+      horizontalRule: {
+        HTMLAttributes: {
+          class: horizontalRule
+        }
+      },
+      listItem: false,
+      orderedList: {
+        HTMLAttributes: {
+          class: orderedList
+        }
+      },
+      paragraph: {
+        HTMLAttributes: {
+          class: paragraph
+        }
+      },
+      // Marks
+      bold: {
+        HTMLAttributes: {
+          class: bold
+        }
+      },
+      code: {
+        HTMLAttributes: {
+          class: codeWithoutMarks
+        }
+      },
+      italic: {
+        HTMLAttributes: {
+          class: italic
+        }
+      },
+      strike: {
+        HTMLAttributes: {
+          class: strikethrough
+        }
+      }
+    }),
+    Heading.extend({
+      renderHTML({ node, HTMLAttributes }) {
+        const hasLevel = this.options.levels.includes(node.attrs.level);
+        const level = hasLevel ? node.attrs.level : this.options.levels[0];
+        return [
+          `h${level}`,
+          mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+            class: heading[level]
+          }),
+          0
+        ];
+      }
+    }),
+    ListItem.extend({
+      renderHTML: ({ HTMLAttributes }) => [
+        "li",
+        mergeAttributes(HTMLAttributes, {
+          marker: "\u2022 ",
+          class: listItem
+        }),
+        [
+          "div",
+          {
+            role: "none"
+          },
+          0
+        ]
+      ]
+    }),
+    // https://github.com/ueberdosis/tiptap/tree/main/packages/extension-collaboration
+    ...model && typeof model.content !== "string" ? [
+      Collaboration.configure({
+        fragment: model.content
+      })
+    ] : [],
+    ...model?.provider ? [
+      CollaborationCursor.configure({
+        provider: model.provider,
+        user: model.peer && {
+          name: model.peer.name ?? generateName2(model.peer.id),
+          color: cursorColor.color
+        }
+      })
+    ] : [],
+    Placeholder.configure({
+      placeholder: placeholder2,
+      emptyEditorClass: "before:content-[attr(data-placeholder)] before:absolute opacity-50 cursor-text"
+    })
+  ], [
+    model?.id
+  ]);
+  return useNaturalEditor({
+    extensions,
+    editorProps: {
+      attributes: {
+        class: mx2("focus:outline-none focus-visible:outline-none", slots.editor?.className),
+        spellcheck: slots.editor?.spellCheck === false ? "false" : "true",
+        tabindex: slots.editor?.tabIndex ? String(slots.editor?.tabIndex) : "0"
+      }
+    }
+  }, [
+    extensions
+  ]);
+};
+var RichTextComposer = /* @__PURE__ */ forwardRef2((props, ref) => {
+  const editor = useEditor(props);
+  useImperativeHandle2(ref, () => editor, [
+    editor
+  ]);
+  return /* @__PURE__ */ React2.createElement(EditorContent, {
+    ...props.slots?.root,
+    editor
+  });
+});
+
+// packages/ui/react-ui-editor/src/components/Composer/Composer.tsx
+var Composer = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef3(({ slots, ...options }, forwardedRef) => {
+  const model = useTextModel(options);
+  if (model?.content instanceof YXmlFragment) {
+    return /* @__PURE__ */ React3.createElement(RichTextComposer, {
+      ref: forwardedRef,
+      model,
+      slots
+    });
+  } else {
+    return /* @__PURE__ */ React3.createElement(MarkdownComposer, {
+      ref: forwardedRef,
+      model,
+      slots
+    });
+  }
+}));
+
+// packages/ui/react-ui-editor/src/index.ts
+import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
+import { Doc, YText as YText2, YXmlFragment as YXmlFragment2 } from "@dxos/text-model";
+export {
+  Composer,
+  Doc,
+  EditorModes,
+  MarkdownComposer,
+  RichTextComposer,
+  TextKind,
+  YText2 as YText,
+  YXmlFragment2 as YXmlFragment,
+  useTextModel
+};
+//# sourceMappingURL=index.mjs.map