feat(json-crdt-peritext-ui): 🎸 improve link behavior registration

Author: streamich

src/json-crdt-peritext-ui/__demos__/components/App.tsx

@@ -11,7 +11,7 @@ import {DebugState} from '../../plugins/debug/state';
 
 const markdown =
   'The German __automotive sector__ is in the process of *cutting ' +
-  'thousands of jobs* as it grapples with a global shift toward electric vehicles ' +
+  'thousands of jobs* as, [Google Docs](https://developers.google.com/workspace/docs), it grapples with a global shift toward electric vehicles ' +
   '— a transformation Musk himself has been at the forefront of.' +
   '\n\n' +
   '> To be, or not to be: that is the question.' +

src/json-crdt-peritext-ui/components/ContextPaneHeader.tsx

@@ -41,7 +41,7 @@ export const ContextPaneHeader: React.FC<ContextPaneHeaderProps> = ({short, righ
   }
 
   return (
-    <ContextHeader style={{padding: short ? '12px 16px' : '16px'}}>
+    <ContextHeader style={{padding: short ? '12px 16px' : '16px', borderRadius: '8px 8px 0 0'}}>
       {element}
     </ContextHeader>
   );

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

@@ -1,48 +1,27 @@
 import * as React from 'react';
-import {Button} from 'nice-ui/lib/2-inline-block/Button';
 import {ContextTitle} from 'nice-ui/lib/4-card/ContextMenu/ContextTitle';
 import {EmptyState} from 'nice-ui/lib/4-card/EmptyState';
-import {ContextPaneHeader} from '../../../../../components/ContextPaneHeader';
-import {useToolbarPlugin} from '../../../context';
 import {CollaborativeInput} from '../../../../../components/CollaborativeInput';
 import {Input} from '../../../../../components/Input';
 import {useSyncStoreOpt} from '../../../../../web/react/hooks';
 import {ContextSep} from 'nice-ui/lib/4-card/ContextMenu';
 import {BasicButtonClose} from 'nice-ui/lib/2-inline-block/BasicButton/BasicButtonClose';
 import {UrlDisplayCard} from '../../../cards/UrlDisplayCard';
-import {rule} from 'nano-theme';
-import {parseUrl} from '../../../../../web/util';
-import {ContextPaneHeaderSep} from '../../../../../components/ContextPaneHeaderSep';
-import {FormattingTitle} from '../../FormattingTitle';
 import {NewProps} from '../../../types';
 import type {CollaborativeStr} from 'collaborative-editor';
 
-const blockClass = rule({
-  maxW: '600px',
-});
-
 export const New: React.FC<NewProps> = ({formatting}) => {
-  const {toolbar} = useToolbarPlugin();
   const inpRef = React.useRef<HTMLInputElement | null>(null);
   const href = React.useMemo(() => () => formatting.conf()?.str(['href']), [formatting]);
   const hrefView = useSyncStoreOpt(href()?.events) || '';
-  const parsed = React.useMemo(() => parseUrl(hrefView), [hrefView]);
 
   if (!href()) return null;
 
   const str = href as (() => CollaborativeStr);
 
   return (
-    <form className={blockClass} onSubmit={(e) => {
-      e.preventDefault();
-      formatting.save();
-    }}>
-      <ContextPaneHeader short onCloseClick={() => toolbar.newSlice.next(void 0)}>
-        <FormattingTitle formatting={formatting} />
-      </ContextPaneHeader>
-      <ContextPaneHeaderSep />
-
-      <div style={{padding: '16px'}}>
+    <div style={{margin: -16}}>
+      <div style={{padding: 16}}>
         <CollaborativeInput str={str} input={(ref) => (
           <Input focus
             inp={(el) => {
@@ -80,16 +59,10 @@ export const New: React.FC<NewProps> = ({formatting}) => {
           <UrlDisplayCard url={hrefView} />
         </div>
       ) : (
-        <div style={{margin: '-22px 0 -8px'}}>
+        <div style={{margin: '-32px 0 -26px'}}>
           <EmptyState emoji=' ' title=' ' />
         </div>
       )}
-
-      <ContextSep line />
-      
-      <div style={{padding: '16px'}}>
-        <Button small lite={!hrefView} positive={!!parsed} block disabled={!hrefView} submit>Save</Button>
-      </div>
-    </form>
+    </div>
   );
 };

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

@@ -5,8 +5,18 @@ import {renderIcon} from './renderIcon';
 import {New} from './New';
 import {View} from './View';
 import {ToolbarSliceBehaviorData} from '../../../types';
+import {getDomain} from '../../../../../web/util';
 
 export const behavior = {
+  validate: (formatting) => {
+    const obj = formatting.conf()?.view() as {href: string};
+    if (!obj || typeof obj !== 'object') return [{code: 'INVALID_CONFIG'}];
+    const href = obj.href || '';
+    if (typeof href !== 'string') return [{code: 'INVALID_URL'}];
+    if (href.length < 4) return 'empty';
+    const domain = getDomain(href);
+    return domain ? 'good' : 'fine';
+  },
   menu: {
     name: 'Link',
     icon: () => <Iconista width={15} height={15} set="lucide" icon="link" />,

src/json-crdt-peritext-ui/plugins/toolbar/formatting/views/new/FormattingNewCard.tsx

@@ -2,14 +2,29 @@ import * as React from 'react';
 import {ContextPane} from 'nice-ui/lib/4-card/ContextMenu/ContextPane';
 import {useToolbarPlugin} from '../../../context';
 import {FormattingNew} from './FormattingNew';
+import {ContextPaneHeader} from '../../../../../components/ContextPaneHeader';
+import {FormattingTitle} from '../../FormattingTitle';
+import {ContextPaneHeaderSep} from '../../../../../components/ContextPaneHeaderSep';
+import {ContextSep} from 'nice-ui/lib/4-card/ContextMenu';
+import {Button} from 'nice-ui/lib/2-inline-block/Button';
+import {rule} from 'nano-theme';
+import {useSyncStoreOpt} from '../../../../../web/react/hooks';
 import type {NewFormatting} from '../../../state/formattings';
 
+const blockClass = rule({
+  maxW: '600px',
+});
+
 export interface FormattingNewCardProps {
   formatting: NewFormatting;
 }
 
 export const FormattingNewCard: React.FC<FormattingNewCardProps> = ({formatting}) => {
   const {toolbar} = useToolbarPlugin();
+  useSyncStoreOpt(formatting.conf()?.api);
+  const validation = formatting.validate();
+
+  const valid = validation === 'good' || validation === 'fine';
 
   return (
     <div onKeyDown={(e) => {
@@ -20,7 +35,25 @@ export const FormattingNewCard: React.FC<FormattingNewCardProps> = ({formatting}
       }
     }}>
       <ContextPane style={{display: 'block', minWidth: 'calc(min(600px, max(50vw, 260px)))'}}>
-        <FormattingNew formatting={formatting} />
+        <form className={blockClass} onSubmit={(e) => {
+          e.preventDefault();
+          formatting.save();
+        }}>
+          <ContextPaneHeader short onCloseClick={() => toolbar.newSlice.next(void 0)}>
+            <FormattingTitle formatting={formatting} />
+          </ContextPaneHeader>
+          <ContextPaneHeaderSep />
+    
+          <div style={{padding: '16px'}}>
+            <FormattingNew formatting={formatting} />
+          </div>
+    
+          <ContextSep line />
+          
+          <div style={{padding: '16px'}}>
+            <Button small lite={!valid} positive={validation === 'good'} block disabled={!valid} submit>Save</Button>
+          </div>
+        </form>
       </ContextPane>
     </div>
   );

src/json-crdt-peritext-ui/plugins/toolbar/inline/Link.tsx

@@ -3,16 +3,16 @@ import * as React from 'react';
 import {rule} from 'nano-theme';
 
 const blockClass = rule({
-  col: 'blue',
+  col: '#05f',
   td: 'underline',
-  textDecorationColor: 'blue',
+  textDecorationColor: '#05f',
   textDecorationThickness: '1px',
   textDecorationStyle: 'wavy',
   textUnderlineOffset: '.25em',
   // textDecorationSkipInk: 'all',
 
   '&:hover': {
-    col: 'blue',
+    col: '#05f',
   },
   pd: 0,
   mr: 0,
@@ -29,11 +29,14 @@ const blockClass = rule({
 
 export interface LinkProps {
   children: React.ReactNode;
+  layers?: number;
 }
 
 export const Link: React.FC<LinkProps> = (props) => {
-  const {children} = props;
+  const {children, layers = 1} = props;
+  const style: React.CSSProperties | undefined = layers < 2 ? void 0 : {
+    textDecorationThickness: Math.max(Math.min(.5 + layers * .5, 3), 1) + 'px',
+  };
 
-  // return <span className={blockClass}>{children}</span>;
-  return <span className={blockClass}>{children}</span>;
+  return <span className={blockClass} style={style}>{children}</span>;
 };

src/json-crdt-peritext-ui/plugins/toolbar/inline/RenderInline.tsx

@@ -17,7 +17,8 @@ export const RenderInline: React.FC<RenderInlineProps> = (props) => {
   const {inline, children} = props;
   const attrs = inline.attr();
   let element = children;
-  if (attrs[SliceTypeCon.a]) element = <Link>{element}</Link>;
+  const a = attrs[SliceTypeCon.a];
+  if (a) element = <Link layers={a.length}>{element}</Link>;
   if (attrs[SliceTypeCon.mark]) element = <mark>{element}</mark>;
   if (attrs[SliceTypeCon.sup]) element = <sup>{element}</sup>;
   if (attrs[SliceTypeCon.sub]) element = <sub>{element}</sub>;

src/json-crdt-peritext-ui/plugins/toolbar/state/formattings.ts

@@ -2,7 +2,7 @@ import {s} from '../../../../json-crdt-patch';
 import {Model, ObjApi} from '../../../../json-crdt/model';
 import type {Slice} from "../../../../json-crdt-extensions";
 import type {Range} from "../../../../json-crdt-extensions/peritext/rga/Range";
-import type {ToolbarSliceBehavior} from "../types";
+import type {ToolbarSliceBehavior, ValidationResult} from "../types";
 import type {SliceBehavior} from '../../../../json-crdt-extensions/peritext/registry/SliceBehavior';
 import type {ObjNode} from '../../../../json-crdt/nodes';
 import type {ToolbarState} from '.';
@@ -28,6 +28,10 @@ export class RangeFormatting<R extends Range<string> = Range<string>, Node exten
   public conf(): ObjApi<Node> | undefined {
     return;
   }
+
+  public validate(): ValidationResult {
+    return this.behavior.data()?.validate?.(this) ?? 'fine';
+  }
 }
 
 /**

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

@@ -17,7 +17,7 @@ export interface ToolbarSliceBehaviorData extends Record<string, unknown> {
    *     or 'fine'. If the formatting is invalid, return an array of validation
    *     errors.
    */
-  validate?: (formatting: ToolbarFormatting) => ValidationResult;
+  validate?: (formatting: ToolbarFormatting<any, any>) => ValidationResult;
 
   /**
    * Returns a short description of the formatting, for the user to easily
@@ -82,12 +82,14 @@ export interface EditProps {
 /**
  * Represents the result of a validation. The `good` and `fine` values
  * represent a successful validation, while the `ValidationErrorResult[]` is
- * a list of errors that occurred during validation.
+ * a list of errors that occurred during validation. The `empty` value means
+ * that not enough data was provided to validate the formatting.
  */
-export type ValidationResult = 'good' | 'fine' | ValidationErrorResult[];
+export type ValidationResult = 'good' | 'fine' | 'empty' | ValidationErrorResult[];
 
 export interface ValidationErrorResult {
-  message: string;
+  code: string;
+  message?: string;
   field?: string;
 }