@bigbinary/neetoui-rn 3.4.0 → 3.5.0

package/src/components/RichTextEditor/RichTextToolbar.tsx

@@ -0,0 +1,476 @@
+import { useRef, useState, type ComponentType } from "react";
+import {
+  Platform,
+  ScrollView,
+  TextInput,
+  View,
+  useWindowDimensions,
+} from "react-native";
+
+import { useBridgeState } from "@10play/tentap-editor";
+import Close from "@bigbinary/neeto-icons-rn/icons/Close";
+import Code from "@bigbinary/neeto-icons-rn/icons/Code";
+import CodeBlock from "@bigbinary/neeto-icons-rn/icons/CodeBlock";
+import ImageUpload from "@bigbinary/neeto-icons-rn/icons/ImageUpload";
+import Link from "@bigbinary/neeto-icons-rn/icons/Link";
+import ListDot from "@bigbinary/neeto-icons-rn/icons/ListDot";
+import ListNumber from "@bigbinary/neeto-icons-rn/icons/ListNumber";
+import Quote from "@bigbinary/neeto-icons-rn/icons/Quote";
+import TextBold from "@bigbinary/neeto-icons-rn/icons/TextBold";
+import TextColor from "@bigbinary/neeto-icons-rn/icons/TextColor";
+import TextCross from "@bigbinary/neeto-icons-rn/icons/TextCross";
+import TextItalic from "@bigbinary/neeto-icons-rn/icons/TextItalic";
+import Underline from "@bigbinary/neeto-icons-rn/icons/Underline";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+
+import { scaleFor } from "../../utils/scale";
+import { CheckBox } from "../CheckBox";
+import { IconButton } from "../ChatInput/IconButton";
+import { Touchable } from "../Touchable";
+import { Typography } from "../Typography";
+
+import { KeyboardDismiss, Pilcrow } from "./icons";
+import type { NeetoBridgeState, NeetoEditorBridge } from "./bridges/types";
+import type { RichTextImage } from "./types";
+
+type RichTextToolbarProps = {
+  editor: NeetoEditorBridge;
+  colors: string[];
+  onPickImage?: () => Promise<RichTextImage | null>;
+  onPickLink?: (current?: string) => Promise<string | null>;
+};
+
+type ToolbarItem = {
+  label: string;
+  Icon: ComponentType<{ size?: number; color?: string }>;
+  isActive?: boolean;
+  disabled?: boolean;
+  onPress: () => void;
+};
+
+// iPads have a keyboard-hide key; iPhones have none, and tentap hides the
+// WebView's accessory bar that would otherwise offer Done.
+const IS_IPHONE = Platform.OS === "ios" && !Platform.isPad;
+
+const HEADING_LEVELS = [1, 2, 3, 4, 5] as const;
+
+type HeadingLevel = Parameters<NeetoEditorBridge["toggleHeading"]>[0];
+
+type Panel = "main" | "style" | "color" | "link";
+
+const escapeHtml = (value: string) =>
+  value
+    .replace(/&/g, "&amp;")
+    .replace(/"/g, "&quot;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+
+// Anything but these (javascript:, data:) becomes part of an https URL.
+const withScheme = (url: string) =>
+  /^(https?|mailto|tel):/i.test(url) ? url : `https://${url}`;
+
+export const RichTextToolbar = ({
+  editor,
+  colors,
+  onPickImage,
+  onPickLink,
+}: RichTextToolbarProps) => {
+  const state = useBridgeState(editor) as NeetoBridgeState;
+  const { theme } = useUnistyles();
+  const { width } = useWindowDimensions();
+  const isWide = width >= 600;
+  const [panel, setPanel] = useState<Panel>("main");
+  const [linkText, setLinkText] = useState("");
+  const [linkUrl, setLinkUrl] = useState("");
+  const [opensInNewTab, setOpensInNewTab] = useState(true);
+  // The form's inputs take focus from the WebView, and Android collapses the
+  // editor's selection on blur, so the range is kept from when Link opened.
+  const linkRange = useRef({ from: 0, to: 0 });
+
+  const choose = (apply: () => void) => () => {
+    apply();
+    setPanel("main");
+  };
+
+  const pickLink = async () => {
+    if (!onPickLink) {
+      linkRange.current = state.linkRange ??
+        state.selection ?? { from: 0, to: 0 };
+      setLinkText(state.linkText ?? "");
+      setLinkUrl(state.activeLink ?? "");
+      setOpensInNewTab(state.linkOpensInNewTab ?? true);
+      setPanel("link");
+
+      return;
+    }
+
+    const url = await onPickLink(state.activeLink);
+    if (url !== null) editor.setLink(url || null);
+  };
+
+  const pickImage = async () => {
+    const image = await onPickImage?.();
+    if (image) editor.insertFigure(image);
+  };
+
+  const items: ToolbarItem[] = [
+    {
+      label: "Text style",
+      Icon: Pilcrow,
+      isActive: !!state.headingLevel,
+      onPress: () => setPanel("style"),
+    },
+    {
+      label: "Bold",
+      Icon: TextBold,
+      isActive: state.isBoldActive,
+      onPress: editor.toggleBold,
+    },
+    {
+      label: "Italic",
+      Icon: TextItalic,
+      isActive: state.isItalicActive,
+      onPress: editor.toggleItalic,
+    },
+    {
+      label: "Link",
+      Icon: Link,
+      isActive: !!state.activeLink,
+      onPress: pickLink,
+    },
+    {
+      label: "Strikethrough",
+      Icon: TextCross,
+      isActive: state.isStrikeActive,
+      onPress: editor.toggleStrike,
+    },
+    {
+      label: "Bulleted list",
+      Icon: ListDot,
+      isActive: state.isBulletListActive,
+      onPress: editor.toggleBulletList,
+    },
+    {
+      label: "Numbered list",
+      Icon: ListNumber,
+      isActive: state.isOrderedListActive,
+      onPress: editor.toggleOrderedList,
+    },
+    {
+      label: "Blockquote",
+      Icon: Quote,
+      isActive: state.isBlockquoteActive,
+      onPress: editor.toggleBlockquote,
+    },
+    ...(onPickImage
+      ? [{ label: "Image", Icon: ImageUpload, onPress: pickImage }]
+      : []),
+    {
+      label: "Text colour",
+      Icon: TextColor,
+      isActive: !!state.activeColor,
+      onPress: () => setPanel("color"),
+    },
+    {
+      label: "Inline code",
+      Icon: Code,
+      isActive: state.isCodeActive,
+      onPress: editor.toggleCode,
+    },
+    {
+      label: "Code block",
+      Icon: CodeBlock,
+      isActive: state.isCodeBlockActive,
+      onPress: editor.toggleCodeBlock,
+    },
+    {
+      label: "Underline",
+      Icon: Underline,
+      isActive: state.isUnderlineActive,
+      onPress: editor.toggleUnderline,
+    },
+  ];
+
+  const styleOptions = [
+    {
+      label: "Normal text",
+      text: "Normal",
+      isActive: !state.headingLevel,
+      apply: () => {
+        if (state.headingLevel) {
+          editor.toggleHeading(state.headingLevel as HeadingLevel);
+        }
+      },
+    },
+    ...HEADING_LEVELS.map(level => ({
+      label: `Heading ${level}`,
+      text: `H${level}`,
+      isActive: state.headingLevel === level,
+      apply: () => editor.toggleHeading(level),
+    })),
+  ];
+
+  // Replaces the range with the link, as desk-web's LinkAddPopOver does, so
+  // edited text and the tab target land together.
+  const applyLink = () => {
+    const url = linkUrl.trim();
+    setPanel("main");
+    if (!url) return;
+
+    const href = escapeHtml(withScheme(url));
+    const text = escapeHtml(linkText.trim() || url);
+    const target = opensInNewTab ? "_blank" : "_self";
+    const { from, to } = linkRange.current;
+    editor.setSelection(from, to);
+    editor.insertHTML(
+      `<a href="${href}" target="${target}" rel="noopener noreferrer nofollow">${text}</a>`
+    );
+  };
+
+  const removeLink = () => {
+    const { from, to } = linkRange.current;
+    editor.setSelection(from, to);
+    editor.setLink(null);
+    setPanel("main");
+  };
+
+  const renderLinkForm = () => (
+    <View style={[styles.linkForm, isWide && styles.linkFormWide]}>
+      <View style={[styles.linkInputs, isWide && styles.linkInputsWide]}>
+        <TextInput
+          accessibilityLabel="Link text"
+          placeholder="Text"
+          placeholderTextColor={theme.colors.text.muted}
+          style={styles.linkInput}
+          value={linkText}
+          onChangeText={setLinkText}
+        />
+        <TextInput
+          autoFocus
+          accessibilityLabel="Link URL"
+          autoCapitalize="none"
+          autoCorrect={false}
+          keyboardType="url"
+          placeholder="Link"
+          placeholderTextColor={theme.colors.text.muted}
+          returnKeyType="done"
+          style={styles.linkInput}
+          value={linkUrl}
+          onChangeText={setLinkUrl}
+          onSubmitEditing={applyLink}
+        />
+      </View>
+      <View style={[styles.linkActions, isWide && styles.linkActionsWide]}>
+        <CheckBox
+          checked={opensInNewTab}
+          label="Open in new tab"
+          labelStyle={styles.linkCheckLabel}
+          onSelect={() => setOpensInNewTab(current => !current)}
+        />
+        <View style={styles.linkButtons}>
+          {!!state.activeLink && (
+            <Touchable
+              accessibilityLabel="Remove link"
+              accessibilityRole="button"
+              style={[styles.item, styles.textItem]}
+              onPress={removeLink}
+            >
+              <Typography size="s">Remove</Typography>
+            </Touchable>
+          )}
+          <Touchable
+            accessibilityLabel="Apply link"
+            accessibilityRole="button"
+            style={[styles.item, styles.textItem]}
+            onPress={applyLink}
+          >
+            <Typography size="s" weight="semibold">
+              Apply
+            </Typography>
+          </Touchable>
+        </View>
+      </View>
+    </View>
+  );
+
+  const renderPanel = () => {
+    if (panel === "style") {
+      return styleOptions.map(({ label, text, isActive, apply }) => (
+        <Touchable
+          accessibilityLabel={label}
+          accessibilityRole="button"
+          key={label}
+          style={[styles.item, styles.textItem, isActive && styles.activeItem]}
+          onPress={choose(apply)}
+        >
+          <Typography size="s" weight={isActive ? "semibold" : "regular"}>
+            {text}
+          </Typography>
+        </Touchable>
+      ));
+    }
+
+    if (panel === "color") {
+      return [
+        ...[...new Set(colors)].map(color => (
+          <Touchable
+            accessibilityLabel={color}
+            accessibilityRole="button"
+            key={color}
+            style={[
+              styles.item,
+              state.activeColor === color && styles.activeItem,
+            ]}
+            onPress={choose(() => editor.setColor(color))}
+          >
+            <View style={[styles.swatch, { backgroundColor: color }]} />
+          </Touchable>
+        )),
+        <Touchable
+          accessibilityLabel="Default colour"
+          accessibilityRole="button"
+          key="default"
+          style={[styles.item, styles.textItem]}
+          onPress={choose(editor.unsetColor)}
+        >
+          <Typography size="s">Default</Typography>
+        </Touchable>,
+      ];
+    }
+
+    return items.map(({ label, Icon, isActive, disabled, onPress }) => (
+      <IconButton
+        accessibilityLabel={label}
+        disabled={disabled}
+        Icon={Icon}
+        key={label}
+        style={[styles.item, isActive && styles.activeItem]}
+        onPress={onPress}
+      />
+    ));
+  };
+
+  return (
+    <View style={styles.toolbar}>
+      {panel !== "main" && (
+        <IconButton
+          accessibilityLabel="Close"
+          Icon={Close}
+          style={styles.item}
+          onPress={() => setPanel("main")}
+        />
+      )}
+      {panel === "link" ? (
+        renderLinkForm()
+      ) : (
+        <ScrollView
+          horizontal
+          contentContainerStyle={styles.items}
+          keyboardShouldPersistTaps="always"
+          showsHorizontalScrollIndicator={false}
+          style={styles.scroller}
+        >
+          {renderPanel()}
+        </ScrollView>
+      )}
+      {IS_IPHONE && (
+        <IconButton
+          accessibilityLabel="Hide keyboard"
+          Icon={KeyboardDismiss}
+          style={styles.item}
+          onPress={editor.blur}
+        />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create((theme, rt) => {
+  const moderateScale = scaleFor(rt.screen);
+
+  return {
+    toolbar: {
+      alignItems: "center",
+      borderBottomColor: theme.colors.border.primary,
+      borderBottomWidth: 1,
+      borderTopColor: theme.colors.border.primary,
+      borderTopWidth: 1,
+      flexDirection: "row",
+    },
+    scroller: {
+      flexGrow: 1,
+      flexShrink: 1,
+    },
+    items: {
+      paddingHorizontal: moderateScale(4),
+    },
+    item: {
+      alignItems: "center",
+      borderRadius: moderateScale(6),
+      justifyContent: "center",
+      minHeight: 44,
+      minWidth: 44,
+    },
+    activeItem: {
+      backgroundColor: theme.colors.background.secondary,
+    },
+    linkForm: {
+      flex: 1,
+      gap: moderateScale(4),
+      paddingRight: moderateScale(8),
+      paddingVertical: moderateScale(6),
+    },
+    linkFormWide: {
+      alignItems: "center",
+      flex: 1,
+      flexDirection: "row",
+      gap: moderateScale(8),
+    },
+    linkInputs: {
+      flexDirection: "row",
+      gap: moderateScale(6),
+    },
+    // Only in the single-row layout: in the stacked phone layout flex:1 is a
+    // zero vertical basis and the action row lands on top of the inputs.
+    linkInputsWide: {
+      flex: 1,
+    },
+    linkActions: {
+      alignItems: "center",
+      flexDirection: "row",
+      justifyContent: "space-between",
+    },
+    linkActionsWide: {
+      flexShrink: 0,
+      gap: moderateScale(8),
+    },
+    linkCheckLabel: {
+      flex: 0,
+    },
+    linkButtons: {
+      flexDirection: "row",
+    },
+    linkInput: {
+      backgroundColor: theme.colors.background.primary,
+      borderColor: theme.colors.border.secondary,
+      borderRadius: moderateScale(6),
+      borderWidth: 1,
+      color: theme.colors.text.primary,
+      flex: 1,
+      fontSize: theme.fontSizes.s,
+      minHeight: moderateScale(36),
+      paddingHorizontal: moderateScale(10),
+      paddingVertical: 0,
+    },
+    textItem: {
+      alignItems: "center",
+      justifyContent: "center",
+      paddingHorizontal: moderateScale(10),
+    },
+    swatch: {
+      borderRadius: 999,
+      height: moderateScale(22),
+      width: moderateScale(22),
+    },
+  };
+});

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

@@ -0,0 +1,29 @@
+import { BridgeExtension } from "@10play/tentap-editor";
+import CodeBlock from "@tiptap/extension-code-block";
+
+export type CodeBlockEditorState = { isCodeBlockActive: boolean };
+
+export type CodeBlockEditorInstance = { toggleCodeBlock: () => void };
+
+type CodeBlockMessage = { type: "toggle-code-block" };
+
+export const CodeBlockBridge = new BridgeExtension<
+  CodeBlockEditorState,
+  CodeBlockEditorInstance,
+  CodeBlockMessage
+>({
+  tiptapExtension: CodeBlock.configure({ HTMLAttributes: {} }),
+  onBridgeMessage: (editor, message) => {
+    if (message.type !== "toggle-code-block") return false;
+
+    editor.chain().focus().toggleCodeBlock().run();
+
+    return true;
+  },
+  extendEditorInstance: sendBridgeMessage => ({
+    toggleCodeBlock: () => sendBridgeMessage({ type: "toggle-code-block" }),
+  }),
+  extendEditorState: editor => ({
+    isCodeBlockActive: editor.isActive("codeBlock"),
+  }),
+});

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

@@ -0,0 +1,107 @@
+import { BridgeExtension } from "@10play/tentap-editor";
+import { getMarkRange, type Editor } from "@tiptap/core";
+
+export type ComposerEditorState = {
+  /** The selection, widened to the whole link when the caret is inside one. */
+  linkRange: { from: number; to: number };
+  linkText: string;
+  linkOpensInNewTab: boolean;
+};
+
+export type ComposerEditorInstance = {
+  focusEmptyParagraph: () => void;
+  insertHTML: (html: string) => void;
+  focusBeforeTrailing: (html: string) => void;
+};
+
+type ComposerMessage =
+  | { type: "focus-empty-paragraph" }
+  | { type: "insert-html"; payload: string }
+  | { type: "focus-before-trailing"; payload: string };
+
+// desk-web's useResponseList: the cursor lands at the end of the content
+// before the trailing blocks (the signature), not inside them.
+const positionBeforeTrailing = (editor: Editor, html: string) => {
+  const { doc } = editor.state;
+  const trailingBlocks = Math.min(
+    new DOMParser().parseFromString(html, "text/html").body.children.length,
+    doc.childCount
+  );
+
+  let trailingSize = 0;
+  for (
+    let index = doc.childCount - trailingBlocks;
+    index < doc.childCount;
+    index++
+  ) {
+    trailingSize += doc.child(index).nodeSize;
+  }
+
+  return Math.max(1, doc.content.size - trailingSize - 1);
+};
+
+const linkState = (editor: Editor): ComposerEditorState => {
+  const { state } = editor;
+  const { from, to, empty, $from } = state.selection;
+  const linkMark = state.schema.marks.link;
+  const range = (empty && linkMark && getMarkRange($from, linkMark)) || {
+    from,
+    to,
+  };
+
+  return {
+    linkRange: { from: range.from, to: range.to },
+    linkText: state.doc.textBetween(range.from, range.to, " "),
+    linkOpensInNewTab: editor.getAttributes("link").target !== "_self",
+  };
+};
+
+export const ComposerBridge = new BridgeExtension<
+  ComposerEditorState,
+  ComposerEditorInstance,
+  ComposerMessage
+>({
+  forceName: "composer",
+  onBridgeMessage: (editor, message) => {
+    if (message.type === "insert-html") {
+      editor.chain().focus().insertContent(message.payload).run();
+
+      return true;
+    }
+
+    if (message.type === "focus-before-trailing") {
+      editor
+        .chain()
+        .focus()
+        .setTextSelection(positionBeforeTrailing(editor, message.payload))
+        .run();
+
+      return true;
+    }
+
+    if (message.type !== "focus-empty-paragraph") return false;
+
+    let emptyParagraphPos: number | undefined;
+    editor.state.doc.descendants((node, pos) => {
+      if (emptyParagraphPos !== undefined) return false;
+
+      if (node.type.name === "paragraph" && node.content.size === 0) {
+        emptyParagraphPos = pos + 1;
+      }
+
+      return true;
+    });
+    editor.commands.focus(emptyParagraphPos ?? "end");
+
+    return true;
+  },
+  extendEditorState: linkState,
+  extendEditorInstance: sendBridgeMessage => ({
+    focusEmptyParagraph: () =>
+      sendBridgeMessage({ type: "focus-empty-paragraph" }),
+    insertHTML: html =>
+      sendBridgeMessage({ type: "insert-html", payload: html }),
+    focusBeforeTrailing: html =>
+      sendBridgeMessage({ type: "focus-before-trailing", payload: html }),
+  }),
+});

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

@@ -0,0 +1,38 @@
+import { BridgeExtension } from "@10play/tentap-editor";
+
+import { Figure } from "./nodes/Figure";
+
+export type FigureAttributes = { src: string; width: number; height?: number };
+
+export type FigureEditorInstance = {
+  insertFigure: (attributes: FigureAttributes) => void;
+};
+
+type FigureMessage = { type: "insert-figure"; payload: FigureAttributes };
+
+export const FigureBridge = new BridgeExtension<
+  object,
+  FigureEditorInstance,
+  FigureMessage
+>({
+  tiptapExtension: Figure,
+  onBridgeMessage: (editor, message) => {
+    if (message.type !== "insert-figure") return false;
+
+    const { src, width, height } = message.payload;
+    editor
+      .chain()
+      .focus()
+      .insertContent({
+        type: Figure.name,
+        attrs: { src, figwidth: width, figheight: height ?? "auto" },
+      })
+      .run();
+
+    return true;
+  },
+  extendEditorInstance: sendBridgeMessage => ({
+    insertFigure: payload =>
+      sendBridgeMessage({ type: "insert-figure", payload }),
+  }),
+});