@medway-ui/native 1.11.0 → 1.13.0

package/src/editor/NoteEditor.tsx

@@ -13,12 +13,9 @@ import {
 import {
   Platform,
   Pressable,
-  ScrollView,
   StyleSheet,
-  Text as RNText,
   TextInput,
   View,
-  type LayoutChangeEvent,
   type NativeSyntheticEvent,
   type StyleProp,
   type TextInputKeyPressEventData,
@@ -35,14 +32,10 @@ import type {
   EditorDocument,
   EditorSelectionState,
   EditorTheme,
-  SlashCommandId,
-  SlashMenuState,
 } from "@medway-ui/notes-core";
 import {
   EMPTY_DOCUMENT,
-  EMPTY_SLASH_STATE,
   INITIAL_EDITOR_STATE,
-  getSlashCommand,
   normalizeDocument,
   normalizeLinkInput,
   sanitizeImageSrc,
@@ -52,14 +45,17 @@ import {
   Bold,
   Code,
   DoubleQuotesL,
+  HeadingH1,
   HeadingH2,
   HeadingH3,
   Image as ImageIcon,
   Italic,
   Link as LinkIcon,
+  ListChecklist,
   ListOrdered,
   ListUnordered,
   Redo,
+  RemoveMinus,
   Strikethrough,
   Underline,
   WindowCodeBlock,
@@ -166,7 +162,7 @@ export type NoteEditorProps = {
    * picker was cancelled. **Different shape from the web prop**: there is no
    * file input here and this package carries no image-picker dependency, so
    * picking the file is the host's job. Providing it is what enables the
-   * toolbar "Inserir imagem" button and the `/Imagem` slash command.
+   * toolbar "Inserir imagem" button.
    */
   onImageUpload?: () => Promise<{ src: string; alt?: string | null } | null>;
   /**
@@ -221,17 +217,6 @@ const nextTitle = (previous: string, value: string): string =>
 
 const TOOLBAR_BUTTON_SIZE = 32;
 
-const SLASH_MENU_WIDTH = 256;
-const SLASH_MENU_GAP = 6;
-
-/** Starts at the caret, pulled left so the menu never crosses the editor's right edge. */
-const getSlashMenuLeft = (caretX: number, editorWidth: number): number =>
-  editorWidth > 0
-    ? Math.max(
-        SLASH_MENU_GAP,
-        Math.min(caretX, editorWidth - SLASH_MENU_WIDTH - SLASH_MENU_GAP)
-      )
-    : caretX;
 const TOOLBAR_BUTTON_HIT_SLOP = getMinTouchHitSlop(TOOLBAR_BUTTON_SIZE);
 
 const MAX_WEBVIEW_REMOUNTS = 3;
@@ -314,8 +299,8 @@ type ToolbarItem = {
 };
 
 /**
- * Same commands, grouping and order as the web `NoteEditor`'s `TOOLBAR_GROUPS`.
- * `link` and `undo`/`redo` are filled in per-instance: they need the live
+ * The web `NoteEditor`'s `TOOLBAR_GROUPS`, plus Título 1, Checklist and Divisor:
+ * the web reaches those through the `/` menu, which mobile does not have. `link` and `undo`/`redo` are filled in per-instance: they need the live
  * `EditorSelectionState` and a dialog opener that only exist in the component.
  */
 const buildToolbarGroups = (
@@ -330,14 +315,17 @@ const buildToolbarGroups = (
     { id: "code", label: "Código", Icon: Code, command: { name: "toggleCode" }, activeKey: "code" },
   ],
   [
+    { id: "heading1", label: "Título 1", Icon: HeadingH1, command: { name: "toggleHeading", level: 1 }, activeKey: "heading1" },
     { id: "heading2", label: "Título 2", Icon: HeadingH2, command: { name: "toggleHeading", level: 2 }, activeKey: "heading2" },
     { id: "heading3", label: "Título 3", Icon: HeadingH3, command: { name: "toggleHeading", level: 3 }, activeKey: "heading3" },
   ],
   [
     { id: "bulletList", label: "Lista com marcadores", Icon: ListUnordered, command: { name: "toggleBulletList" }, activeKey: "bulletList" },
     { id: "orderedList", label: "Lista numerada", Icon: ListOrdered, command: { name: "toggleOrderedList" }, activeKey: "orderedList" },
+    { id: "taskList", label: "Checklist", Icon: ListChecklist, command: { name: "toggleTaskList" }, activeKey: "taskList" },
     { id: "blockquote", label: "Citação", Icon: DoubleQuotesL, command: { name: "toggleBlockquote" }, activeKey: "blockquote" },
     { id: "codeBlock", label: "Bloco de código", Icon: WindowCodeBlock, command: { name: "toggleCodeBlock" }, activeKey: "codeBlock" },
+    { id: "horizontalRule", label: "Divisor", Icon: RemoveMinus, command: { name: "setHorizontalRule" } },
   ],
   [{ id: "link", label: "Inserir link", Icon: LinkIcon, activeKey: "link", onPress: openLinkDialog }],
   [
@@ -346,17 +334,6 @@ const buildToolbarGroups = (
   ],
 ];
 
-/**
- * Unlike every other command — a pure ProseMirror op — "Imagem" needs a file
- * first, so it is only offered when the host gave us a way to resolve one.
- * Kept local because `notes-core` cannot know what a given host can do.
- */
-const visibleSlashCommandIds = (
-  commandIds: SlashCommandId[],
-  canUploadImage: boolean
-): SlashCommandId[] =>
-  canUploadImage ? commandIds : commandIds.filter((id) => id !== "image");
-
 const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
   (
     {
@@ -386,7 +363,6 @@ const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
     const [selectionState, setSelectionState] = useState<EditorSelectionState>(
       INITIAL_EDITOR_STATE
     );
-    const [slashState, setSlashState] = useState<SlashMenuState>(EMPTY_SLASH_STATE);
     const [contentHeight, setContentHeight] = useState(height);
 
     const [title, setTitle] = useState(() => sanitizeTitle(initialTitle ?? ""));
@@ -428,7 +404,6 @@ const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
 
     const handleWebViewReset = useCallback(() => {
       setIsReady(false);
-      setSlashState(EMPTY_SLASH_STATE);
     }, []);
 
     const [webViewKey, setWebViewKey] = useState(0);
@@ -573,9 +548,6 @@ const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
           case "state":
             setSelectionState(editorMessage.state);
             return;
-          case "slash":
-            setSlashState(editorMessage.slash);
-            return;
           case "change":
             // Already debounced by the bundle (`CHANGE_DEBOUNCE_MS`). The extra
             // round trip happens only when a host asked for `onChange`, which
@@ -734,22 +706,8 @@ const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
       [selectionState, openLinkDialog]
     );
 
-    const handleSlashSelect = useCallback(
-      (id: SlashCommandId) => {
-        if (!editable) return;
-        send({ type: "runSlashCommand", commandId: id });
-        if (id === "image") insertImage();
-      },
-      [editable, send, insertImage]
-    );
-
     const containerHeight = isEmbedded ? contentHeight : undefined;
 
-    const [editorWidth, setEditorWidth] = useState(0);
-    const handleEditorLayout = useCallback((event: LayoutChangeEvent) => {
-      setEditorWidth(event.nativeEvent.layout.width);
-    }, []);
-
     const resolvedBackground = backgroundColor ?? theme.background;
 
     return (
@@ -792,10 +750,7 @@ const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
           style={[styles.title, { color: titleColor }]}
         />
 
-        <View
-          style={{ flex: isEmbedded ? undefined : 1 }}
-          onLayout={handleEditorLayout}
-        >
+        <View style={{ flex: isEmbedded ? undefined : 1 }}>
           <WebView
             key={webViewKey}
             ref={webViewRef}
@@ -845,15 +800,6 @@ const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
               { backgroundColor: resolvedBackground },
             ]}
           />
-
-          {slashState.active && slashState.caret ? (
-            <NoteEditorSlashMenu
-              slash={slashState}
-              editorWidth={editorWidth}
-              canUploadImage={Boolean(onImageUpload)}
-              onSelect={handleSlashSelect}
-            />
-          ) : null}
         </View>
 
         <Dialog open={linkDialogOpen} onOpenChange={setLinkDialogOpen}>
@@ -973,94 +919,6 @@ function NoteEditorToolbar({
   );
 }
 
-/**
- * Positioned from the `caret` rect the bundle reports. No arrow-key navigation:
- * a touch UI has no keyboard focus to drive one, so every item is tappable.
- *
- * `caret` is in CSS pixels inside the WebView viewport, treated here as `dp` —
- * valid as long as the WebView isn't scaled.
- */
-function NoteEditorSlashMenu({
-  slash,
-  editorWidth,
-  canUploadImage,
-  onSelect,
-}: {
-  slash: SlashMenuState;
-  editorWidth: number;
-  canUploadImage: boolean;
-  onSelect: (id: SlashCommandId) => void;
-}) {
-  const surfaceColor = useEditorThemeColor("surface-elevated", "#FFFFFF");
-  const borderColor = useThemeColor("gray-stroke-muted");
-  const primaryText = useThemeColor("gray-foreground");
-  const mutedText = useThemeColor("gray-foreground-muted");
-  const activeBackground = useEditorThemeColor(
-    "secondary-background-soft-emphasis",
-    "rgba(1, 208, 180, 0.08)"
-  );
-
-  if (!slash.caret) return null;
-
-  const commandIds = visibleSlashCommandIds(slash.commandIds, canUploadImage);
-
-  return (
-    <View
-      style={[
-        styles.slashMenuShadow,
-        {
-          left: getSlashMenuLeft(slash.caret.x, editorWidth),
-          top: slash.caret.y + slash.caret.height + SLASH_MENU_GAP,
-        },
-      ]}
-    >
-      <View
-        style={[
-          styles.slashMenu,
-          { backgroundColor: surfaceColor, borderColor },
-        ]}
-      >
-        <ScrollView
-          style={styles.slashMenuScroll}
-          contentContainerStyle={styles.slashMenuContent}
-          keyboardShouldPersistTaps="handled"
-          showsVerticalScrollIndicator
-        >
-          {commandIds.length === 0 ? (
-            <RNText style={[styles.slashEmpty, { color: mutedText }]}>
-              Nenhum resultado
-            </RNText>
-          ) : (
-            commandIds.map((id) => {
-              const command = getSlashCommand(id);
-              if (!command) return null;
-
-              return (
-                <Pressable
-                  key={id}
-                  accessibilityRole="button"
-                  onPress={() => onSelect(id)}
-                  style={({ pressed }) => [
-                    styles.slashItem,
-                    pressed ? { backgroundColor: activeBackground } : null,
-                  ]}
-                >
-                  <RNText style={[styles.slashItemLabel, { color: primaryText }]}>
-                    {command.label}
-                  </RNText>
-                  <RNText style={[styles.slashItemDescription, { color: mutedText }]}>
-                    {command.description}
-                  </RNText>
-                </Pressable>
-              );
-            })
-          )}
-        </ScrollView>
-      </View>
-    </View>
-  );
-}
-
 const styles = StyleSheet.create({
   container: { flex: 1 },
   containerEmbedded: { flex: 0 },
@@ -1104,46 +962,6 @@ const styles = StyleSheet.create({
   toolbarButtonDisabled: {
     opacity: 0.4,
   },
-  slashMenuShadow: {
-    position: "absolute",
-    zIndex: 50,
-    width: SLASH_MENU_WIDTH,
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.14,
-    shadowRadius: 14,
-    elevation: 8,
-  },
-  slashMenu: {
-    borderRadius: 6,
-    borderWidth: StyleSheet.hairlineWidth,
-    overflow: "hidden",
-  },
-  slashMenuScroll: {
-    maxHeight: 288,
-  },
-  slashMenuContent: {
-    padding: 4,
-    gap: 12,
-  },
-  slashEmpty: {
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    fontSize: 13,
-  },
-  slashItem: {
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderRadius: 4,
-  },
-  slashItemLabel: {
-    fontSize: 14,
-    fontWeight: "500",
-  },
-  slashItemDescription: {
-    fontSize: 12,
-    marginTop: 2,
-  },
 });
 
 export default memo(NoteEditor);