@webority/mobile-ui 0.0.0-stage → 0.0.33

package/lib/commonjs/components/RichTextEditor/RichTextEditor.js

@@ -0,0 +1,314 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RichTextEditor = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _index2 = require("../../utils/index.js");
+var _corners = require("../../utils/corners.js");
+var _index3 = require("../Skeleton/index.js");
+var _markdownActions = require("./markdownActions.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/** 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.
+ */
+const RichTextEditor = exports.RichTextEditor = /*#__PURE__*/(0, _react.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 = (0, _index.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const text = value ?? '';
+  const [selection, setSelection] = (0, _react.useState)({
+    start: 0,
+    end: 0
+  });
+  const [focused, setFocused] = (0, _react.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] = (0, _react.useState)(null);
+  const handleSelectionChange = (0, _react.useCallback)(event => {
+    setSelection(event.nativeEvent.selection);
+    setForcedSelection(null);
+  }, []);
+  const handleChangeText = (0, _react.useCallback)(next => {
+    setForcedSelection(null);
+    onChangeText?.(next);
+  }, [onChangeText]);
+  const runAction = (0, _react.useCallback)(action => {
+    if (disabled) {
+      return;
+    }
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) {
+      (0, _index2.triggerHaptic)(h);
+    }
+    const result = (0, _markdownActions.applyMarkdownAction)({
+      text,
+      selection: (0, _markdownActions.normalizeSelection)(selection, text.length)
+    }, action);
+    setSelection(result.selection);
+    setForcedSelection(result.selection);
+    onChangeText?.(result.text);
+  }, [disabled, haptic, onChangeText, selection, text]);
+  if (loading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(RichTextEditorSkeleton, {
+      actionCount: actions.length,
+      minHeight: minHeight,
+      style: style,
+      testID: testID
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    testID: testID,
+    style: [styles.container, {
+      borderColor: focused ? theme.colors.border.focus : theme.colors.border.primary,
+      opacity: disabled ? 0.55 : 1
+    }, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.toolbar, toolbarStyle],
+      children: actions.map(action => /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarButton, {
+        action: action,
+        disabled: disabled,
+        onPress: runAction,
+        styles: styles,
+        theme: theme,
+        testID: testID ? `${testID}-${action}` : undefined
+      }, action))
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.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 = (0, _index.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const buttons = Array.from({
+    length: Math.max(1, actionCount)
+  }, (_, index) => index);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    testID: testID,
+    style: [styles.container, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.toolbar,
+      children: buttons.map(index => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Skeleton, {
+        width: 34,
+        height: 30,
+        radius: "sm"
+      }, index))
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [styles.skeletonBody, {
+        minHeight
+      }],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Skeleton, {
+        shape: "text",
+        width: "94%",
+        height: 14
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Skeleton, {
+        shape: "text",
+        width: "100%",
+        height: 14
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Skeleton, {
+        shape: "text",
+        width: "72%",
+        height: 14
+      })]
+    })]
+  });
+};
+RichTextEditorSkeleton.displayName = 'RichTextEditorSkeleton';
+const buildStyles = theme => _reactNative.StyleSheet.create({
+  container: {
+    borderWidth: theme.colors.border.width,
+    borderColor: theme.colors.border.primary,
+    borderRadius: theme.radius.md,
+    ..._corners.smoothCorners,
+    backgroundColor: theme.colors.background.primary,
+    overflow: 'hidden'
+  },
+  toolbar: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    gap: theme.spacing.xs,
+    padding: theme.spacing.xs,
+    borderBottomWidth: _reactNative.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,
+    ..._corners.smoothCorners,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  buttonLabel: {
+    ...(0, _index.fontFor)(theme, 'medium'),
+    fontSize: theme.typography.fontSize.sm
+  },
+  input: {
+    ...(0, _index.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
+  }
+});
+var _default = exports.default = RichTextEditor;
+//# sourceMappingURL=RichTextEditor.js.map

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "RichTextEditor", {
+  enumerable: true,
+  get: function () {
+    return _RichTextEditor.RichTextEditor;
+  }
+});
+Object.defineProperty(exports, "applyMarkdownAction", {
+  enumerable: true,
+  get: function () {
+    return _markdownActions.applyMarkdownAction;
+  }
+});
+var _markdownActions = require("./markdownActions.js");
+var _RichTextEditor = require("./RichTextEditor.js");
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,213 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.normalizeSelection = exports.applyMarkdownAction = void 0;
+/**
+ * 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. */
+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)
+  };
+};
+exports.normalizeSelection = normalizeSelection;
+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.
+ */
+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]);
+};
+exports.applyMarkdownAction = applyMarkdownAction;
+//# sourceMappingURL=markdownActions.js.map