feat(json-crdt-peritext-ui): 🎸 render fomatting preview text

Author: streamich

src/json-crdt-peritext-ui/plugins/toolbar/cursor/caret/CaretBottomOverlay.tsx

@@ -1,20 +1,21 @@
 import * as React from 'react';
 import {ContextPane, ContextItem, ContextSep} from 'nice-ui/lib/4-card/ContextMenu';
 import {useToolbarPlugin} from '../../context';
+import {SYMBOL} from 'nano-theme';
 import type {Inline, Peritext, Slice} from '../../../../../json-crdt-extensions';
 import type {CaretViewProps} from '../../../../web/react/cursor/CaretView';
-import type {ToolbarSlice, ToolBarSliceRegistryEntry} from '../../types';
+import type {Formatting, ToolBarSliceRegistryEntry} from '../../types';
 
-class ToolbarSliceImpl implements ToolbarSlice {
+class FormattingImpl implements Formatting {
   public constructor(
     public readonly slice: Slice<string>,
     public readonly def: ToolBarSliceRegistryEntry,
   ) {}
 }
 
-const getConfigurableFormattingItems = (txt: Peritext, inline?: Inline): ToolbarSliceImpl[] => {
+const getConfigurableFormattingItems = (txt: Peritext, inline?: Inline): Formatting[] => {
   const slices = inline?.p1.layers;
-  const res: ToolbarSlice[] = [];
+  const res: Formatting[] = [];
   if (!slices) return res;
   const registry = txt.editor.getRegistry();
   for (const slice of slices) {
@@ -24,7 +25,7 @@ const getConfigurableFormattingItems = (txt: Peritext, inline?: Inline): Toolbar
     if (!def) continue;
     const isConfigurable = !!def.schema;
     if (!isConfigurable) continue;
-    res.push(new ToolbarSliceImpl(slice, def));
+    res.push(new FormattingImpl(slice, def));
   }
   return res;
 };
@@ -48,9 +49,20 @@ export const CaretBottomOverlay: React.FC<CaretBottomOverlayProps> = (props) =>
         const {def, slice} = formatting;
         const data = def.data();
         const menu = data.menu;
+        const previewText = data.previewText?.(formatting) || '';
+        const previewTextFormatted = previewText.length < 20 ? previewText : `${previewText.slice(0, 20)}${SYMBOL.ELLIPSIS}`;
         return (
-          <ContextItem inset icon={menu?.icon?.()} right={data.renderIcon?.(formatting)} onClick={() => {}}>
+          <ContextItem inset
+            icon={menu?.icon?.()}
+            right={data.renderIcon?.(formatting)}
+            onClick={() => {}}
+          >
             {menu?.name ?? def.name}
+            {!!previewTextFormatted && (
+              <span style={{opacity: 0.5}}>
+                {previewTextFormatted}
+              </span>
+            )}
           </ContextItem>
         );
       })}

src/json-crdt-peritext-ui/plugins/toolbar/state/ToolbarState.tsx

@@ -108,6 +108,11 @@ export class ToolbarState implements UiLifeCycles {
         if (!data || typeof data !== 'object') return;
         return <Favicon url={data.href} />;
       };
+      data.previewText = ({slice}) => {
+        const data = slice.data() as {href: string};
+        if (!data || typeof data !== 'object') return '';
+        return (data.href || '').replace(/^(https?:\/\/)?(www\.)?/, '');
+      };
     }
 
     const changeUnsubscribe = et.subscribe('change', (ev) => {

src/json-crdt-peritext-ui/plugins/toolbar/types.ts

@@ -9,7 +9,25 @@ export type {MenuItem};
 
 export interface SliceRegistryEntryData extends Record<string, unknown> {
   menu?: MenuItem;
-  renderIcon?: (formatting: ToolbarSlice) => React.ReactNode;
+
+  /**
+   * A function that returns a React node to be used as an icon for the
+   * formatting.
+   *
+   * @param formatting The formatting slice.
+   * @returns A React node to be used as an icon for the formatting.
+   */
+  renderIcon?: (formatting: Formatting) => React.ReactNode;
+
+  /**
+   * Returns a short description of the formatting, for the user to easily
+   * differentiate it from other formattings.
+   *
+   * @param formatting The formatting slice.
+   * @returns A short description of the formatting. For example, if the
+   * formatting is text color, this would be the color name.
+   */
+  previewText?: (formatting: Formatting) => string;
 }
 
 export type ToolBarSliceRegistryEntry<
@@ -18,7 +36,7 @@ export type ToolBarSliceRegistryEntry<
   Schema extends NodeBuilder = NodeBuilder,
 > = SliceRegistryEntry<Behavior, Tag, Schema, SliceRegistryEntryData>;
 
-export interface ToolbarSlice {
+export interface Formatting {
   slice: Slice<string>;
   def: ToolBarSliceRegistryEntry;
 }