@bigbinary/neetoui-rn 3.4.0 → 3.5.0

package/src/components/RichTextEditor/bridges/MentionBridge.ts

@@ -0,0 +1,79 @@
+import { BridgeExtension } from "@10play/tentap-editor";
+import type { Editor } from "@tiptap/core";
+
+import { Mention } from "./nodes/Mention";
+
+export type MentionQuery = { query: string; from: number; to: number };
+
+export type MentionEditorState = {
+  /** The "@word" being typed at the caret, while there is one. */
+  mentionQuery: MentionQuery | null;
+};
+
+export type MentionEditorInstance = {
+  insertMention: (
+    mention: { id: string; label: string },
+    range: { from: number; to: number }
+  ) => void;
+};
+
+type MentionMessage = {
+  type: "insert-mention";
+  payload: {
+    id: string;
+    label: string;
+    range: { from: number; to: number };
+  };
+};
+
+const TRIGGER = /(?:^|\s)@([^\s@]*)$/;
+
+export const findMentionQuery = (editor: Editor): MentionQuery | null => {
+  const { empty, $from } = editor.state.selection;
+  if (!empty || !$from.parent.isTextblock) return null;
+
+  const textBefore = $from.parent.textBetween(
+    0,
+    $from.parentOffset,
+    undefined,
+    ""
+  );
+  const match = TRIGGER.exec(textBefore);
+  if (!match) return null;
+
+  const query = match[1] ?? "";
+
+  return { query, from: $from.pos - query.length - 1, to: $from.pos };
+};
+
+export const MentionBridge = new BridgeExtension<
+  MentionEditorState,
+  MentionEditorInstance,
+  MentionMessage
+>({
+  forceName: "mention",
+  tiptapExtension: Mention,
+  onBridgeMessage: (editor, message) => {
+    if (message.type !== "insert-mention") return false;
+
+    const { id, label, range } = message.payload;
+    editor
+      .chain()
+      .focus()
+      .insertContentAt(range, [
+        { type: "mention", attrs: { id, label } },
+        { type: "text", text: " " },
+      ])
+      .run();
+
+    return true;
+  },
+  extendEditorState: editor => ({ mentionQuery: findMentionQuery(editor) }),
+  extendEditorInstance: sendBridgeMessage => ({
+    insertMention: ({ id, label }, range) =>
+      sendBridgeMessage({
+        type: "insert-mention",
+        payload: { id, label, range },
+      }),
+  }),
+});

package/src/components/RichTextEditor/bridges/VariableBridge.ts

@@ -0,0 +1,7 @@
+import { BridgeExtension } from "@10play/tentap-editor";
+
+import { Variable } from "./nodes/Variable";
+
+export const VariableBridge = new BridgeExtension<object, object, unknown>({
+  tiptapExtension: Variable,
+});

package/src/components/RichTextEditor/bridges/index.ts

@@ -0,0 +1,66 @@
+import {
+  BridgeExtension,
+  ImageBridge,
+  TenTapStartKit,
+} from "@10play/tentap-editor";
+import type { AnyExtension } from "@tiptap/core";
+
+import { CodeBlockBridge } from "./CodeBlockBridge";
+import { ComposerBridge } from "./ComposerBridge";
+import { FigureBridge } from "./FigureBridge";
+import { MentionBridge } from "./MentionBridge";
+import { VariableBridge } from "./VariableBridge";
+
+// Several bridges list the same dependency (bullet and ordered lists both
+// bring listItem; colour and highlight both bring textStyle), and tiptap warns
+// when an extension is registered twice. Each dependency is kept once.
+const withoutRepeatedDeps = (bridges: BridgeExtension[]) => {
+  const seen = new Set(
+    bridges.flatMap(bridge =>
+      bridge.tiptapExtension ? [bridge.tiptapExtension.name] : []
+    )
+  );
+
+  return bridges.map(bridge => {
+    const deps = bridge.tiptapExtensionDeps;
+    if (!deps?.length) return bridge;
+
+    const kept = deps.filter(extension => !seen.has(extension.name));
+    kept.forEach(extension => seen.add(extension.name));
+    if (kept.length === deps.length) return bridge;
+
+    return new BridgeExtension({
+      ...bridge,
+      forceName: bridge.name,
+      tiptapExtensionDeps: kept,
+    });
+  });
+};
+
+// tentap's ImageBridge registers a node also named "image"; FigureBridge
+// replaces it with neeto-editor's <figure> schema.
+export const NEETO_BRIDGES = withoutRepeatedDeps([
+  ...TenTapStartKit.filter(bridge => bridge !== ImageBridge),
+  CodeBlockBridge,
+  VariableBridge,
+  FigureBridge,
+  MentionBridge,
+  ComposerBridge,
+]);
+
+export const editorBridges = ({ variables = false } = {}) =>
+  variables
+    ? NEETO_BRIDGES
+    : NEETO_BRIDGES.filter(bridge => bridge !== VariableBridge);
+
+export const tiptapExtensions = (): AnyExtension[] => {
+  const byName = new Map<string, AnyExtension>();
+  NEETO_BRIDGES.flatMap(bridge => [
+    ...(bridge.tiptapExtension ? [bridge.tiptapExtension] : []),
+    ...(bridge.tiptapExtensionDeps ?? []),
+  ]).forEach(extension => {
+    if (!byName.has(extension.name)) byName.set(extension.name, extension);
+  });
+
+  return [...byName.values()];
+};

package/src/components/RichTextEditor/bridges/nodes/Figure.ts

@@ -0,0 +1,127 @@
+import { Node, mergeAttributes } from "@tiptap/core";
+
+const imageOf = (element: HTMLElement) =>
+  element.tagName === "IMG" ? element : element.querySelector("img");
+
+// A pasted <img> carries its size as width="80" or style="width: 80px",
+// not neeto-editor's figwidth; without this it renders at the 500px default.
+const pastedWidth = (image: HTMLElement | null) => {
+  if (!image) return null;
+
+  const width =
+    parseInt(image.getAttribute("width") ?? "", 10) ||
+    parseInt(image.style.width, 10);
+
+  return Number.isFinite(width) && width > 0 ? width : null;
+};
+
+export const Figure = Node.create({
+  name: "image",
+
+  addOptions() {
+    return { HTMLAttributes: {}, openImageInNewTab: true };
+  },
+
+  group: "block",
+
+  content: "inline*",
+
+  draggable: false,
+
+  isolating: true,
+
+  addAttributes() {
+    return {
+      id: {
+        default: null,
+        parseHTML: element => element.getAttribute("id"),
+      },
+      src: {
+        default: null,
+        parseHTML: element => imageOf(element)?.getAttribute("src"),
+      },
+      alt: {
+        default: "image",
+        parseHTML: element => imageOf(element)?.getAttribute("alt") || "image",
+      },
+      figheight: {
+        default: "auto",
+        parseHTML: element => imageOf(element)?.getAttribute("figheight"),
+      },
+      figwidth: {
+        default: 500,
+        parseHTML: element =>
+          imageOf(element)?.getAttribute("figwidth") ??
+          pastedWidth(imageOf(element)),
+      },
+      align: {
+        default: "left",
+        parseHTML: element => imageOf(element)?.getAttribute("align"),
+      },
+      border: {
+        default: true,
+        parseHTML: element =>
+          imageOf(element)?.getAttribute("data-border") === "true",
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "figure",
+        contentElement: (figure: HTMLElement) =>
+          figure.querySelector("figcaption") ??
+          figure.ownerDocument.createElement("figcaption"),
+      },
+      { tag: "img[src]" },
+    ];
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    const { align, src, figheight, figwidth, border } = node.attrs;
+
+    if (!src) return ["span"];
+
+    const pointerEvents = this.options.openImageInNewTab
+      ? ""
+      : "pointer-events:none;";
+    const height = figheight === "auto" ? "auto" : `${figheight}px`;
+
+    return [
+      "div",
+      {
+        class: [
+          "neeto-editor__image-wrapper",
+          `neeto-editor__image--${align}`,
+          border && "neeto-editor__image--bordered",
+        ]
+          .filter(Boolean)
+          .join(" "),
+      },
+      [
+        "figure",
+        this.options.HTMLAttributes,
+        [
+          "a",
+          {
+            href: src,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            class: "neeto-editor__image",
+            style: `height:${height};width:${figwidth}px;display:inline-block;${pointerEvents}`,
+          },
+          [
+            "img",
+            mergeAttributes(HTMLAttributes, {
+              draggable: false,
+              contenteditable: false,
+              "data-border": border,
+            }),
+          ],
+        ],
+        ["figcaption", { style: `width:${figwidth}px;` }, 0],
+      ],
+    ];
+  },
+});

package/src/components/RichTextEditor/bridges/nodes/Mention.ts

@@ -0,0 +1,48 @@
+import { Node, mergeAttributes } from "@tiptap/core";
+
+// @tiptap/extension-mention's schema and HTML, which neeto-editor uses
+// unconfigured; the suggestion popup is native, so its plugin is left out.
+export const Mention = Node.create({
+  name: "mention",
+
+  group: "inline",
+
+  inline: true,
+
+  selectable: false,
+
+  atom: true,
+
+  addAttributes() {
+    return {
+      id: {
+        default: null,
+        parseHTML: element => element.getAttribute("data-id"),
+        renderHTML: attributes =>
+          attributes.id ? { "data-id": attributes.id } : {},
+      },
+      label: {
+        default: null,
+        parseHTML: element => element.getAttribute("data-label"),
+        renderHTML: attributes =>
+          attributes.label ? { "data-label": attributes.label } : {},
+      },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: `span[data-type="${this.name}"]` }];
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    return [
+      "span",
+      mergeAttributes({ "data-type": this.name }, HTMLAttributes),
+      `@${node.attrs.label ?? node.attrs.id}`,
+    ];
+  },
+
+  renderText({ node }) {
+    return `@${node.attrs.label ?? node.attrs.id}`;
+  },
+});

package/src/components/RichTextEditor/bridges/nodes/Variable.ts

@@ -0,0 +1,68 @@
+import { Node, mergeAttributes } from "@tiptap/core";
+
+type RenderLabelArgs = {
+  options: { charOpen: string; charClose: string };
+  node: { attrs: Record<string, string | null> };
+};
+
+export const Variable = Node.create({
+  name: "variable",
+
+  addOptions() {
+    return {
+      HTMLAttributes: { class: "neeto-editor-variable" },
+      charOpen: "{{",
+      charClose: "}}",
+      renderLabel({ options, node }: RenderLabelArgs) {
+        return `${options.charOpen}${node.attrs.id || node.attrs.label}${
+          options.charClose
+        }`;
+      },
+    };
+  },
+
+  group: "inline",
+
+  inline: true,
+
+  selectable: false,
+
+  atom: true,
+
+  addAttributes() {
+    return {
+      id: {
+        default: null,
+        parseHTML: element => element.getAttribute("data-id"),
+        renderHTML: attributes =>
+          attributes.id ? { "data-id": attributes.id } : {},
+      },
+      label: {
+        default: null,
+        parseHTML: element => element.getAttribute("data-label"),
+        renderHTML: attributes =>
+          attributes.label ? { "data-label": attributes.label } : {},
+      },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: "span[data-variable]" }];
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    return [
+      "span",
+      mergeAttributes(
+        { "data-variable": "" },
+        this.options.HTMLAttributes,
+        HTMLAttributes
+      ),
+      this.options.renderLabel({ options: this.options, node }),
+    ];
+  },
+
+  renderText({ node }) {
+    return this.options.renderLabel({ options: this.options, node });
+  },
+});

package/src/components/RichTextEditor/bridges/types.ts

@@ -0,0 +1,26 @@
+import type { BridgeState, EditorBridge } from "@10play/tentap-editor";
+
+import type {
+  CodeBlockEditorInstance,
+  CodeBlockEditorState,
+} from "./CodeBlockBridge";
+import type {
+  ComposerEditorInstance,
+  ComposerEditorState,
+} from "./ComposerBridge";
+import type { FigureEditorInstance } from "./FigureBridge";
+import type {
+  MentionEditorInstance,
+  MentionEditorState,
+} from "./MentionBridge";
+
+export type NeetoEditorBridge = EditorBridge &
+  CodeBlockEditorInstance &
+  FigureEditorInstance &
+  MentionEditorInstance &
+  ComposerEditorInstance;
+
+export type NeetoBridgeState = BridgeState &
+  CodeBlockEditorState &
+  MentionEditorState &
+  ComposerEditorState;

package/src/components/RichTextEditor/editorCss.ts

@@ -0,0 +1,69 @@
+import { Platform } from "react-native";
+
+type EditorTheme = {
+  colors: {
+    primary: string;
+    text: { primary: string };
+    background: { primary: string; secondary: string };
+    border: { primary: string };
+  };
+  fontSizes: { m: number };
+};
+
+// Android's WebView can only reach the app's bundled SF Pro through the
+// android_asset base URL RichTextEditor sets; iOS has it as the system font.
+const FONT_FACE = Platform.select({
+  android:
+    "@font-face { font-family: 'SFProText'; src: url('fonts/SFProText-Regular.ttf'); }",
+  default: "",
+});
+
+const FONT_FAMILY = Platform.select({
+  ios: "-apple-system, sans-serif",
+  default: "'SFProText', sans-serif",
+});
+
+export const editorCss = (
+  theme: EditorTheme,
+  backgroundColor = theme.colors.background.primary
+) => `
+  ${FONT_FACE}
+  * {
+    font-family: ${FONT_FAMILY};
+  }
+  body {
+    background-color: ${backgroundColor};
+    color: ${theme.colors.text.primary};
+    font-size: ${theme.fontSizes.m}px;
+  }
+  .ProseMirror {
+    padding: 12px 16px;
+  }
+  .ProseMirror p {
+    line-height: 1.6;
+    margin: 0 0 0.5rem;
+  }
+  .ProseMirror p.is-empty {
+    margin-bottom: 0;
+  }
+  [data-type="mention"] {
+    color: ${theme.colors.primary};
+    font-weight: 600;
+  }
+  .neeto-editor-variable {
+    background-color: ${theme.colors.background.secondary};
+    border-radius: 4px;
+    padding: 0 2px;
+  }
+  .neeto-editor__image-wrapper img {
+    max-width: 100%;
+  }
+  pre {
+    background-color: ${theme.colors.background.secondary};
+  }
+  blockquote {
+    border-left: 3px solid ${theme.colors.border.primary};
+    margin-left: 0;
+    padding-left: 12px;
+  }
+`;

package/src/components/RichTextEditor/icons/index.tsx

@@ -0,0 +1,41 @@
+import Svg, { Path } from "react-native-svg";
+
+type IconProps = { size?: number; color?: string };
+
+const strokeProps = (color: string) => ({
+  stroke: color,
+  strokeWidth: 1.2,
+  strokeLinecap: "round" as const,
+  strokeLinejoin: "round" as const,
+});
+
+// Paths from lucide (ISC), the set desk-web's editor menu uses; neeto-icons
+// has no pilcrow or plain T.
+export const Pilcrow = ({ size = 24, color = "#344054" }: IconProps) => (
+  <Svg fill="none" height={size} viewBox="0 0 24 24" width={size}>
+    <Path d="M13 4v16M17 4v16" {...strokeProps(color)} />
+    <Path d="M19 4H9.5a4.5 4.5 0 0 0 0 9H13" {...strokeProps(color)} />
+  </Svg>
+);
+
+export const TextType = ({ size = 24, color = "#344054" }: IconProps) => (
+  <Svg fill="none" height={size} viewBox="0 0 24 24" width={size}>
+    <Path d="M4 7V4h16v3M9 20h6M12 4v16" {...strokeProps(color)} />
+  </Svg>
+);
+
+export const KeyboardDismiss = ({
+  size = 24,
+  color = "#344054",
+}: IconProps) => (
+  <Svg fill="none" height={size} viewBox="0 0 24 24" width={size}>
+    <Path
+      d="M4.6 3.6h14.8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4.6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2z"
+      {...strokeProps(color)}
+    />
+    <Path
+      d="M6 7h.01M10 7h.01M14 7h.01M18 7h.01M8 10h.01M12 10h.01M16 10h.01M8 12.8h8M9 18.4l3 2.4 3-2.4"
+      {...strokeProps(color)}
+    />
+  </Svg>
+);

package/src/components/RichTextEditor/index.ts

@@ -0,0 +1,3 @@
+export { RichTextEditor } from "./LazyRichTextEditor";
+export type { RichTextEditorProps, RichTextEditorRef } from "./RichTextEditor";
+export { type RichTextImage } from "./types";

package/src/components/RichTextEditor/injectableText.ts

@@ -0,0 +1,11 @@
+// tentap injects its bridge config as '<JSON>' into the WebView, so a quote
+// in text it carries (the placeholder) breaks the page and a backslash needs
+// doubling to survive the string literal.
+export const injectableText = (text: string) =>
+  text
+    .replace(/"([^"]*)"/g, "“$1”")
+    .replace(/"/g, "”")
+    .replace(/'/g, "’")
+    .replace(/\\/g, "\\\\")
+    .replace(/\s{2,}/g, " ")
+    .trim();

package/src/components/RichTextEditor/types.ts

@@ -0,0 +1 @@
+export type RichTextImage = { src: string; width: number; height?: number };