feat(json-crdt-peritext-ui): 🎸 improve color formatting definition

Author: streamich

src/json-crdt-extensions/peritext/registry/SliceRegistry.ts

@@ -72,6 +72,24 @@ export class SliceRegistry implements Printable {
       }),
     );
 
+    const colSchema = s.obj(
+      {},
+      {
+        color: s.str<string>(''),
+      },
+    );
+    registry.add(
+      new SliceBehavior(SliceStacking.Many, TAG.col, 'Color', colSchema, false, void 0, {
+        col: (jsonml) => {
+          const attr = jsonml[1] || {};
+          const data: JsonNodeView<SchemaToJsonNode<typeof colSchema>> = {
+            color: attr.color ?? '',
+          };
+          return [TAG.col, {data, inline: true}] as PeritextMlElement<TAG.col, any, true>;
+        },
+      }),
+    );
+
     // TODO: add more default annotations with "Many" stacking behavior
     // comment = SliceTypeCon.comment,
     // font = SliceTypeCon.font,

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

@@ -24,8 +24,6 @@ export const CaretBottomOverlay: React.FC<CaretBottomOverlayProps> = (props) =>
   const inline = fwd || bwd;
   const {toolbar} = useToolbarPlugin()!;
 
-  console.log(toolbar.lastEvent?.detail);
-
   if (!inline) return;
   if (!isDirectCaretPlacement(toolbar.lastEvent)) return;
 

src/json-crdt-peritext-ui/plugins/toolbar/formatting/tags/a/Edit.tsx

@@ -56,7 +56,7 @@ export const Edit: React.FC<EditProps> = ({formatting, onSave}) => {
             />
           )}
         />
-      ) : (
+      ) : !data.href ? null : (
         <Button
           icon={<Iconista set={'lucide'} icon={'plus'} width={16} height={16} />}
           size={-1}

src/json-crdt-peritext-ui/plugins/toolbar/formatting/tags/col/behavior.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import {Iconista} from 'nice-ui/lib/icons/Iconista';
+import type {ToolbarSliceBehaviorData} from '../../../types';
+
+export const behavior = {
+  menu: {
+    name: 'Color',
+    icon: () => <Iconista width={16} height={16} set="lucide" icon="paintbrush" />,
+  },
+  validate: (formatting) => {
+    const obj = formatting.conf()?.view() as {color: string};
+    if (!obj || typeof obj !== 'object') return [{code: 'INVALID_CONFIG'}];
+    const color = obj.color || '';
+    if (typeof color !== 'string') return [{code: 'INVALID_COLOR'}];
+    if (!/^#[0-9A-Fa-f]{6}$/.test(color)) return [{code: 'INVALID_COLOR'}];
+    if (color.length < 4) return 'empty';
+    return 'good';
+  },
+  previewText: (formatting) => {
+    const data = formatting.conf()?.view() as {color: string};
+    if (!data || typeof data !== 'object') return '';
+    return data.color || '';
+  },
+} satisfies ToolbarSliceBehaviorData;

src/json-crdt-peritext-ui/plugins/toolbar/formatting/tags/index.ts

@@ -1,3 +1,4 @@
 import {behavior as a} from './a/behavior';
+import {behavior as col} from './col/behavior';
 
-export {a};
+export {a, col};

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

@@ -73,15 +73,20 @@ export class ToolbarState implements UiLifeCycles {
   // }
 
   public startSliceConfig(tag: SliceTypeCon | string | number, menu?: MenuItem): NewFormatting | undefined {
+    console.log(1);
     const editor = this.txt.editor;
     const behavior = editor.getRegistry().get(tag);
+    console.log(2);
     const range = editor.mainCursor()?.range();
     if (!range) return;
+    console.log(3);
     const newSlice = this.newSlice;
     if (!behavior) {
+      console.log(4);
       newSlice.next(void 0);
       return;
     }
+    console.log(5);
     const formatting = new NewFormatting(behavior, range, this);
     newSlice.next(formatting);
     return formatting;
@@ -103,6 +108,8 @@ export class ToolbarState implements UiLifeCycles {
 
     const registry = this.txt.editor.getRegistry();
     Object.assign(registry.get(SliceTypeCon.a)?.data() || {}, behavior.a);
+    // registry.add({});
+    Object.assign(registry.get(SliceTypeCon.col)?.data() || {}, behavior.col);
 
     const changeUnsubscribe = et.subscribe('change', (ev) => {
       const lastEvent = ev.detail.ev;
@@ -332,11 +339,7 @@ export class ToolbarState implements UiLifeCycles {
           name: 'Artistic',
           expand: 8,
           children: [
-            {
-              name: 'Color',
-              icon: () => <Iconista width={16} height={16} set="lucide" icon="paintbrush" />,
-              onSelect: () => {},
-            },
+            this.colorMenuItem(),
             {
               name: 'Background',
               icon: () => <Iconista width={16} height={16} set="lucide" icon="paint-bucket" />,
@@ -353,6 +356,16 @@ export class ToolbarState implements UiLifeCycles {
     };
   };
 
+  public readonly colorMenuItem = (): MenuItem => {
+    const colorItem: MenuItem = {
+      ...behavior.col.menu,
+      onSelect: () => {
+        this.startSliceConfig(CommonSliceType.col, colorItem);
+      },
+    };
+    return colorItem;
+  };
+
   public readonly linkMenuItem = (): MenuItem => {
     const linkAction: MenuItem = {
       ...behavior.a.menu,