@webority/mobile-ui 0.0.0-stage → 0.0.33

package/lib/module/components/RichTextEditor/RichTextEditor.js

@@ -0,0 +1,309 @@
+"use strict";
+
+import React, { forwardRef, useCallback, useMemo, useState } from 'react';
+import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import { fontFor, useTheme } from "../../theme/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
+import { smoothCorners } from "../../utils/corners.js";
+import { Skeleton } from "../Skeleton/index.js";
+import { applyMarkdownAction, normalizeSelection } from "./markdownActions.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Glyph + spoken name per action. The glyph IS the markdown marker wherever one reads as itself. */
+const ACTION_META = {
+  bold: {
+    glyph: 'B',
+    label: 'Bold'
+  },
+  italic: {
+    glyph: 'I',
+    label: 'Italic'
+  },
+  strikethrough: {
+    glyph: 'S',
+    label: 'Strikethrough'
+  },
+  code: {
+    glyph: '</>',
+    label: 'Inline code'
+  },
+  link: {
+    glyph: 'link',
+    label: 'Link'
+  },
+  heading1: {
+    glyph: 'H1',
+    label: 'Heading 1'
+  },
+  heading2: {
+    glyph: 'H2',
+    label: 'Heading 2'
+  },
+  bulletList: {
+    glyph: '•',
+    label: 'Bulleted list'
+  },
+  numberedList: {
+    glyph: '1.',
+    label: 'Numbered list'
+  },
+  quote: {
+    glyph: '>',
+    label: 'Quote'
+  }
+};
+const DEFAULT_ACTIONS = ['bold', 'italic', 'strikethrough', 'code', 'link', 'heading1', 'heading2', 'bulletList', 'numberedList', 'quote'];
+const DEFAULT_MIN_HEIGHT = 160;
+
+/**
+ * A markdown editor: a themed multiline field plus a toolbar that wraps the
+ * current selection in the markers our own `<Markdown>` renderer reads back.
+ *
+ * Deliberately NOT a WYSIWYG surface. Rich-text-on-RN means a WebView, which is
+ * exactly what replacing the stale `react-native-pell-rich-editor` was meant to
+ * escape: markdown in, markdown out, one plain TextInput, no bridge.
+ */
+export const RichTextEditor = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    value,
+    onChangeText,
+    placeholder,
+    actions = DEFAULT_ACTIONS,
+    disabled = false,
+    loading = false,
+    minHeight = DEFAULT_MIN_HEIGHT,
+    autoFocus = false,
+    accessibilityLabel,
+    haptic,
+    style,
+    toolbarStyle,
+    inputStyle,
+    testID
+  } = props;
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const text = value ?? '';
+  const [selection, setSelection] = useState({
+    start: 0,
+    end: 0
+  });
+  const [focused, setFocused] = useState(false);
+  /**
+   * Only set for the render immediately after a toolbar action. Holding the
+   * TextInput's `selection` permanently fights the platform keyboard on
+   * Android, so it is released as soon as the field reports the caret moved.
+   */
+  const [forcedSelection, setForcedSelection] = useState(null);
+  const handleSelectionChange = useCallback(event => {
+    setSelection(event.nativeEvent.selection);
+    setForcedSelection(null);
+  }, []);
+  const handleChangeText = useCallback(next => {
+    setForcedSelection(null);
+    onChangeText?.(next);
+  }, [onChangeText]);
+  const runAction = useCallback(action => {
+    if (disabled) {
+      return;
+    }
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) {
+      triggerHaptic(h);
+    }
+    const result = applyMarkdownAction({
+      text,
+      selection: normalizeSelection(selection, text.length)
+    }, action);
+    setSelection(result.selection);
+    setForcedSelection(result.selection);
+    onChangeText?.(result.text);
+  }, [disabled, haptic, onChangeText, selection, text]);
+  if (loading) {
+    return /*#__PURE__*/_jsx(RichTextEditorSkeleton, {
+      actionCount: actions.length,
+      minHeight: minHeight,
+      style: style,
+      testID: testID
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    style: [styles.container, {
+      borderColor: focused ? theme.colors.border.focus : theme.colors.border.primary,
+      opacity: disabled ? 0.55 : 1
+    }, style],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [styles.toolbar, toolbarStyle],
+      children: actions.map(action => /*#__PURE__*/_jsx(ToolbarButton, {
+        action: action,
+        disabled: disabled,
+        onPress: runAction,
+        styles: styles,
+        theme: theme,
+        testID: testID ? `${testID}-${action}` : undefined
+      }, action))
+    }), /*#__PURE__*/_jsx(TextInput, {
+      ref: ref,
+      value: text,
+      onChangeText: handleChangeText,
+      onSelectionChange: handleSelectionChange,
+      onFocus: () => setFocused(true),
+      onBlur: () => setFocused(false),
+      selection: forcedSelection ?? undefined,
+      editable: !disabled,
+      autoFocus: autoFocus,
+      multiline: true,
+      textAlignVertical: "top",
+      placeholder: placeholder,
+      placeholderTextColor: theme.colors.text.tertiary,
+      accessibilityLabel: accessibilityLabel,
+      style: [styles.input, {
+        minHeight
+      }, inputStyle],
+      testID: testID ? `${testID}-input` : undefined
+    })]
+  });
+});
+RichTextEditor.displayName = 'RichTextEditor';
+const ToolbarButton = ({
+  action,
+  disabled,
+  onPress,
+  styles,
+  theme,
+  testID
+}) => {
+  const meta = ACTION_META[action];
+  // Each glyph carries its own formatting, so the button reads as what it does.
+  // Built as one object rather than an array entry per rule: a `fontWeight:
+  // undefined` in a style array wipes the family weight `fontFor` just set.
+  const glyphStyle = {
+    color: disabled ? theme.colors.text.disabled : theme.colors.text.primary
+  };
+  if (action === 'bold') {
+    glyphStyle.fontWeight = theme.typography.fontWeight.bold;
+  }
+  if (action === 'italic') {
+    glyphStyle.fontStyle = 'italic';
+  }
+  if (action === 'strikethrough') {
+    glyphStyle.textDecorationLine = 'line-through';
+  }
+  return /*#__PURE__*/_jsx(Pressable, {
+    onPress: () => onPress(action),
+    disabled: disabled,
+    accessibilityRole: "button",
+    accessibilityLabel: meta.label,
+    accessibilityState: {
+      disabled
+    },
+    hitSlop: 4,
+    testID: testID,
+    style: ({
+      pressed
+    }) => [styles.button, {
+      backgroundColor: pressed ? theme.colors.surface.pressed : theme.colors.background.secondary
+    }],
+    children: /*#__PURE__*/_jsx(Text, {
+      allowFontScaling: false,
+      style: [styles.buttonLabel, glyphStyle],
+      children: meta.glyph
+    })
+  });
+};
+ToolbarButton.displayName = 'RichTextEditorToolbarButton';
+
+/**
+ * Placeholder shape for `<RichTextEditor>`: the same bordered box, a row of
+ * button-sized blocks where the toolbar sits, and text lines filling the body,
+ * so nothing reflows when the draft arrives.
+ */
+const RichTextEditorSkeleton = ({
+  actionCount,
+  minHeight,
+  style,
+  testID
+}) => {
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const buttons = Array.from({
+    length: Math.max(1, actionCount)
+  }, (_, index) => index);
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    style: [styles.container, style],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.toolbar,
+      children: buttons.map(index => /*#__PURE__*/_jsx(Skeleton, {
+        width: 34,
+        height: 30,
+        radius: "sm"
+      }, index))
+    }), /*#__PURE__*/_jsxs(View, {
+      style: [styles.skeletonBody, {
+        minHeight
+      }],
+      children: [/*#__PURE__*/_jsx(Skeleton, {
+        shape: "text",
+        width: "94%",
+        height: 14
+      }), /*#__PURE__*/_jsx(Skeleton, {
+        shape: "text",
+        width: "100%",
+        height: 14
+      }), /*#__PURE__*/_jsx(Skeleton, {
+        shape: "text",
+        width: "72%",
+        height: 14
+      })]
+    })]
+  });
+};
+RichTextEditorSkeleton.displayName = 'RichTextEditorSkeleton';
+const buildStyles = theme => StyleSheet.create({
+  container: {
+    borderWidth: theme.colors.border.width,
+    borderColor: theme.colors.border.primary,
+    borderRadius: theme.radius.md,
+    ...smoothCorners,
+    backgroundColor: theme.colors.background.primary,
+    overflow: 'hidden'
+  },
+  toolbar: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    gap: theme.spacing.xs,
+    padding: theme.spacing.xs,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: theme.colors.border.secondary,
+    backgroundColor: theme.colors.background.secondary
+  },
+  button: {
+    minWidth: 34,
+    height: 30,
+    paddingHorizontal: theme.spacing.xs,
+    borderRadius: theme.radius.sm,
+    ...smoothCorners,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  buttonLabel: {
+    ...fontFor(theme, 'medium'),
+    fontSize: theme.typography.fontSize.sm
+  },
+  input: {
+    ...fontFor(theme, 'normal'),
+    color: theme.colors.text.primary,
+    fontSize: theme.typography.fontSize.base,
+    lineHeight: theme.typography.fontSize.base * 1.5,
+    paddingHorizontal: theme.spacing.md,
+    paddingVertical: theme.spacing.sm
+  },
+  skeletonBody: {
+    paddingHorizontal: theme.spacing.md,
+    paddingVertical: theme.spacing.sm,
+    gap: theme.spacing.sm
+  }
+});
+export default RichTextEditor;
+//# sourceMappingURL=RichTextEditor.js.map

package/lib/module/components/RichTextEditor/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export { applyMarkdownAction } from "./markdownActions.js";
+export { RichTextEditor } from "./RichTextEditor.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/RichTextEditor/markdownActions.js

@@ -0,0 +1,207 @@
+"use strict";
+
+/**
+ * The text transforms behind the editor's toolbar, kept out of the component so
+ * the behaviour people actually notice — toggling bold OFF again, and where the
+ * caret lands when nothing is selected — can be tested as data, with no
+ * rendering involved. Same split as Markdown/parse.ts.
+ *
+ * The output targets our own `<Markdown>` renderer, so the vocabulary is the
+ * subset that parser reads: `**`, `*`, `~~`, backtick, `[](…)`, `#`, `##`,
+ * `- `, `1. `, `> `. Nothing here emits anything that renderer would show as
+ * literal text.
+ */
+
+const INLINE_MARKERS = {
+  bold: '**',
+  italic: '*',
+  strikethrough: '~~',
+  code: '`'
+};
+
+/** A whole link, and only a whole link — used to decide "is this already one?". */
+const WHOLE_LINK = /^\[([^\]]*)\]\(([^)\s]*)\)$/;
+const LINK_URL_PLACEHOLDER = 'url';
+const BLOCK_RULES = {
+  heading1: {
+    has: l => /^#\s/.test(l),
+    prefix: () => '# '
+  },
+  heading2: {
+    has: l => /^##\s/.test(l),
+    prefix: () => '## '
+  },
+  bulletList: {
+    has: l => /^[-*+]\s/.test(l),
+    prefix: () => '- '
+  },
+  numberedList: {
+    has: l => /^\d+[.)]\s/.test(l),
+    prefix: index => `${index + 1}. `
+  },
+  quote: {
+    has: l => /^>\s?/.test(l),
+    prefix: () => '> '
+  }
+};
+
+/** Every block marker this editor writes, so switching kinds replaces rather than stacks. */
+const ANY_BLOCK_PREFIX = /^(?:#{1,6}\s+|[-*+]\s+|\d+[.)]\s+|>\s?)/;
+const isBlockAction = action => action in BLOCK_RULES;
+const clamp = (value, max) => {
+  // React Native reports -1 for "no selection yet" on some Android builds.
+  if (!Number.isFinite(value) || value < 0) {
+    return 0;
+  }
+  return Math.min(Math.trunc(value), max);
+};
+
+/** Selection as given can be reversed, unset, or past the end after an edit. */
+export const normalizeSelection = (selection, length) => {
+  const a = clamp(selection.start, length);
+  const b = clamp(selection.end, length);
+  return {
+    start: Math.min(a, b),
+    end: Math.max(a, b)
+  };
+};
+const caret = at => ({
+  start: at,
+  end: at
+});
+const applyInlineMarker = (text, selection, marker) => {
+  const {
+    start,
+    end
+  } = selection;
+  const selected = text.slice(start, end);
+  const size = marker.length;
+
+  // `*` is a prefix of `**`, so italic must never mistake bold for itself:
+  // unwrapping one star per side would silently downgrade bold to italic.
+  const boldCollision = marker === '*';
+  const wrappedInside = selected.length >= size * 2 && selected.startsWith(marker) && selected.endsWith(marker);
+  if (wrappedInside && !(boldCollision && selected.startsWith('**') && selected.endsWith('**'))) {
+    const inner = selected.slice(size, selected.length - size);
+    return {
+      text: text.slice(0, start) + inner + text.slice(end),
+      selection: {
+        start,
+        end: start + inner.length
+      }
+    };
+  }
+  const before = text.slice(Math.max(0, start - size), start);
+  const after = text.slice(end, end + size);
+  const wrappedOutside = start >= size && before === marker && after === marker && !(boldCollision && text.slice(Math.max(0, start - 2), start) === '**');
+  if (wrappedOutside) {
+    return {
+      text: text.slice(0, start - size) + selected + text.slice(end + size),
+      selection: {
+        start: start - size,
+        end: end - size
+      }
+    };
+  }
+  const next = text.slice(0, start) + marker + selected + marker + text.slice(end);
+  return {
+    text: next,
+    selection: start === end ? caret(start + size) : {
+      start: start + size,
+      end: end + size
+    }
+  };
+};
+const applyLink = (text, selection) => {
+  const {
+    start,
+    end
+  } = selection;
+  const selected = text.slice(start, end);
+  const existing = WHOLE_LINK.exec(selected);
+  if (existing) {
+    const label = existing[1];
+    return {
+      text: text.slice(0, start) + label + text.slice(end),
+      selection: {
+        start,
+        end: start + label.length
+      }
+    };
+  }
+  const inserted = `[${selected}](${LINK_URL_PLACEHOLDER})`;
+  const next = text.slice(0, start) + inserted + text.slice(end);
+  if (start === end) {
+    // Nothing selected: the label is what the user types first, so the caret
+    // goes between the brackets rather than onto the URL placeholder.
+    return {
+      text: next,
+      selection: caret(start + 1)
+    };
+  }
+  const urlStart = start + selected.length + 3;
+  return {
+    text: next,
+    selection: {
+      start: urlStart,
+      end: urlStart + LINK_URL_PLACEHOLDER.length
+    }
+  };
+};
+const applyBlockPrefix = (text, selection, action) => {
+  const rule = BLOCK_RULES[action];
+  const lines = text.split('\n');
+  const offsets = [];
+  let cursor = 0;
+  for (const line of lines) {
+    offsets.push(cursor);
+    cursor += line.length + 1;
+  }
+  const lineIndexAt = position => {
+    let index = 0;
+    for (let i = 0; i < lines.length; i += 1) {
+      if (offsets[i] <= position) {
+        index = i;
+      }
+    }
+    return index;
+  };
+  const first = lineIndexAt(selection.start);
+  const last = lineIndexAt(selection.end);
+  const affected = lines.slice(first, last + 1);
+  const allHave = affected.every(line => rule.has(line));
+  const rewritten = affected.map((line, index) => allHave ? line.replace(ANY_BLOCK_PREFIX, '') : rule.prefix(index) + line.replace(ANY_BLOCK_PREFIX, ''));
+  const firstDelta = rewritten[0].length - affected[0].length;
+  const totalDelta = rewritten.reduce((sum, line, index) => sum + (line.length - affected[index].length), 0);
+  const nextLines = [...lines.slice(0, first), ...rewritten, ...lines.slice(last + 1)];
+  const nextText = nextLines.join('\n');
+  return {
+    text: nextText,
+    selection: normalizeSelection({
+      start: Math.max(offsets[first], selection.start + firstDelta),
+      end: selection.end + totalDelta
+    }, nextText.length)
+  };
+};
+
+/**
+ * Applies one toolbar action to the current text + selection and returns the
+ * next pair. Pure: the caller owns the state.
+ *
+ * Wrapping applies to the selection; with nothing selected the markers are
+ * inserted and the caret lands between them. Applying an action to text that
+ * already carries it removes it instead of stacking a second copy — which is
+ * the half people notice immediately when it is missing.
+ */
+export const applyMarkdownAction = (state, action) => {
+  const text = state.text ?? '';
+  const selection = normalizeSelection(state.selection, text.length);
+  if (isBlockAction(action)) {
+    return applyBlockPrefix(text, selection, action);
+  }
+  if (action === 'link') {
+    return applyLink(text, selection);
+  }
+  return applyInlineMarker(text, selection, INLINE_MARKERS[action]);
+};
+//# sourceMappingURL=markdownActions.js.map