chore: add field editor

Author: stevenle

packages/root-cms/shared/objects.ts

@@ -1,3 +1,33 @@
 export function isObject(data: any): boolean {
   return typeof data === 'object' && !Array.isArray(data) && data !== null;
 }
+
+/**
+ * Recursively sets data to an object using dot notation, e.g.
+ * ```
+ * setDeepKey({}, 'foo.bar', 'value');
+ * // => {foo: {bar: 'value'}}
+ * ```
+ */
+export function setDeepKey(data: any, deepKey: string, value: any) {
+  if (deepKey.includes('.')) {
+    const [head, tail] = splitKey(deepKey);
+    data[head] ??= {};
+    setDeepKey(data[head], tail, value);
+  } else {
+    const key = deepKey;
+    if (typeof value === 'undefined') {
+      delete data[key];
+    } else {
+      data[key] = value;
+    }
+  }
+  return data;
+}
+
+function splitKey(key: string) {
+  const index = key.indexOf('.');
+  const head = key.substring(0, index);
+  const tail = key.substring(index + 1);
+  return [head, tail] as const;
+}

packages/root-cms/ui/components/FieldEditor/FieldEditor.css

@@ -0,0 +1,18 @@
+.FieldEditor__FieldHeader {
+  position: relative;
+  padding-right: 30px;
+  margin-bottom: 8px;
+}
+
+.FieldEditor__FieldHeader__label {
+  font-size: 12px;
+  font-weight: 600;
+  display: flex;
+  gap: 8px;
+}
+
+.FieldEditor__FieldHeader__help {
+  font-size: 12px;
+  font-weight: 400;
+  margin-top: 2px;
+}

packages/root-cms/ui/components/FieldEditor/FieldEditor.tsx

@@ -0,0 +1,77 @@
+import * as schema from '../../../core/schema.js';
+import {joinClassNames} from '../../utils/classes.js';
+import {StringField} from './fields/StringField.js';
+import {FieldEditorProvider} from './hooks/useFieldEditor.js';
+import './FieldEditor.css';
+import {FieldProps} from './fields/Field.js';
+
+export interface FieldEditorProps<ValueType = any> {
+  className?: string;
+  schema: schema.Schema;
+  onChange?: (value: ValueType) => void;
+  value?: ValueType;
+}
+
+/**
+ * Component that renders an editor for fields from a schema.ts object.
+ */
+export function FieldEditor(props: FieldEditorProps) {
+  const fields = (props.schema.fields || []).filter((field) => !!field.id);
+  return (
+    <FieldEditorProvider value={props.value} onChange={props.onChange}>
+      <div className={joinClassNames(props.className, 'FieldEditor')}>
+        {fields.map((field) => (
+          <Field field={field} deepKey={field.id!} />
+        ))}
+      </div>
+    </FieldEditorProvider>
+  );
+}
+
+function Field(props: FieldProps) {
+  const field = props.field;
+  if (!field.id) {
+    console.warn('missing id for field:');
+    console.warn(field);
+    return null;
+  }
+
+  const showFieldHeader = !props.hideHeader;
+
+  return (
+    <div className="FieldEditor__Field" data-deepkey={props.deepKey}>
+      {showFieldHeader && (
+        <FieldHeader {...props} />
+      )}
+      <div className="FieldEditor__Field__input">
+        {field.type === 'string' ? (
+          <StringField {...props} />
+        ) : (
+          <div className="FieldEditor__Field__unknown">
+            Unknown field type: {field.type}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function FieldHeader(props: FieldProps & {className?: string}) {
+  const field = props.field;
+  return (
+    <div className={joinClassNames(props.className, 'FieldEditor__FieldHeader')}>
+      {field.deprecated ? (
+        <div className="FieldEditor__FieldHeader__label">
+          DEPRECATED: {field.label}
+        </div>
+      ) : (
+        <div className="FieldEditor__FieldHeader__label">
+          <span>{field.label}</span>
+        </div>
+      )}
+      {field.help && (
+        <div className="FieldEditor__FieldHeader__help">{field.help}</div>
+      )}
+    </div>
+  );
+}

packages/root-cms/ui/components/FieldEditor/fields/Field.tsx

@@ -0,0 +1,7 @@
+import * as schema from '../../../../core/schema.js';
+
+export interface FieldProps {
+  deepKey: string;
+  field: schema.Field;
+  hideHeader?: boolean;
+}

packages/root-cms/ui/components/FieldEditor/fields/StringField.css

@@ -0,0 +1,53 @@
+import {TextInput, Textarea} from '@mantine/core';
+import {ChangeEvent} from 'preact/compat';
+import {useEffect, useState} from 'preact/hooks';
+import * as schema from '../../../../core/schema.js';
+import {FieldProps} from './Field.js';
+import {useFieldEditor} from '../hooks/useFieldEditor.js';
+
+export function StringField(props: FieldProps) {
+  const field = props.field as schema.StringField;
+  const [value, setValue] = useState('');
+  const fieldEditor = useFieldEditor();
+
+  function onChange(newValue: string) {
+    setValue(newValue);
+    fieldEditor.set(props.deepKey, newValue);
+  }
+
+  useEffect(() => {
+    const unsubscribe = fieldEditor.subscribe(
+      props.deepKey,
+      (newValue: string) => {
+        setValue(newValue);
+      }
+    );
+    return unsubscribe;
+  }, []);
+
+  if (field.variant === 'textarea') {
+    return (
+      <Textarea
+        size="xs"
+        radius={0}
+        autosize
+        minRows={2}
+        maxRows={field.maxRows || 12}
+        value={value}
+        onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {
+          onChange(e.currentTarget.value);
+        }}
+      />
+    );
+  }
+  return (
+    <TextInput
+      size="xs"
+      radius={0}
+      value={value}
+      onChange={(e: ChangeEvent<HTMLInputElement>) => {
+        onChange(e.currentTarget.value);
+      }}
+    />
+  );
+}

packages/root-cms/ui/components/FieldEditor/fields/StringField.tsx

@@ -0,0 +1,56 @@
+import {ComponentChildren, createContext} from 'preact';
+import {useContext, useMemo} from 'preact/hooks';
+import {setDeepKey} from '../../../../shared/objects.js';
+
+export class FieldEditorController {
+  value: any;
+  onChange?: (newValue: any) => void;
+
+  constructor(value?: any, onChange?: (newValue: any) => void) {
+    this.value = value || {};
+    this.onChange = onChange;
+  }
+
+  /**
+   * Subscribes to changes on a deepKey.
+   */
+  subscribe(deepKey: string, cb: (newValue: any) => void) {
+  }
+
+  /**
+   * Sets a value to a deepKey.
+   */
+  set(deepKey: string, value: any) {
+    setDeepKey(this.value, deepKey, value);
+    if (this.onChange) {
+      this.onChange(this.value);
+    }
+  }
+}
+
+const CONTEXT = createContext<FieldEditorController | null>(null);
+
+export interface FieldEditorProviderProps {
+  value?: any;
+  onChange?: (newValue: any) => void;
+  children?: ComponentChildren;
+}
+
+export function FieldEditorProvider(props: FieldEditorProviderProps) {
+  const fieldEditor = useMemo(() => {
+    return new FieldEditorController(props.value, props.onChange);
+  }, []);
+  return (
+    <CONTEXT.Provider value={fieldEditor}>
+      {props.children}
+    </CONTEXT.Provider>
+  );
+}
+
+export function useFieldEditor(): FieldEditorController {
+  const fieldEditor = useContext(CONTEXT);
+  if (!fieldEditor) {
+    throw new Error('useFieldEditor() should be used within a <FieldEditorProvider>');
+  }
+  return fieldEditor;
+}

packages/root-cms/ui/components/FieldEditor/hooks/useFieldEditor.tsx

@@ -145,6 +145,7 @@
 }
 .LexicalTheme__link {
   color: rgb(33, 111, 219);
+  font-weight: 500;
   text-decoration: none;
 }
 .LexicalTheme__link:hover {

packages/root-cms/ui/components/RichTextEditor/LexicalTheme.css

@@ -53,9 +53,9 @@ export const LexicalTheme: EditorThemeClasses = {
   },
   hr: 'LexicalTheme__hr',
   hrSelected: 'LexicalTheme__hrSelected',
-  image: 'editor-image',
+  htmlCode: 'LexicalTheme__htmlCode',
+  image: 'LexicalTheme__image',
   indent: 'LexicalTheme__indent',
-  inlineImage: 'inline-editor-image',
   layoutContainer: 'LexicalTheme__layoutContainer',
   layoutItem: 'LexicalTheme__layoutItem',
   link: 'LexicalTheme__link',
@@ -85,26 +85,6 @@ export const LexicalTheme: EditorThemeClasses = {
   rtl: 'LexicalTheme__rtl',
   specialText: 'LexicalTheme__specialText',
   tab: 'LexicalTheme__tabNode',
-  table: 'LexicalTheme__table',
-  tableAddColumns: 'LexicalTheme__tableAddColumns',
-  tableAddRows: 'LexicalTheme__tableAddRows',
-  tableAlignment: {
-    center: 'LexicalTheme__tableAlignmentCenter',
-    right: 'LexicalTheme__tableAlignmentRight',
-  },
-  tableCell: 'LexicalTheme__tableCell',
-  tableCellActionButton: 'LexicalTheme__tableCellActionButton',
-  tableCellActionButtonContainer:
-    'LexicalTheme__tableCellActionButtonContainer',
-  tableCellHeader: 'LexicalTheme__tableCellHeader',
-  tableCellResizer: 'LexicalTheme__tableCellResizer',
-  tableCellSelected: 'LexicalTheme__tableCellSelected',
-  tableFrozenColumn: 'LexicalTheme__tableFrozenColumn',
-  tableFrozenRow: 'LexicalTheme__tableFrozenRow',
-  tableRowStriping: 'LexicalTheme__tableRowStriping',
-  tableScrollableWrapper: 'LexicalTheme__tableScrollableWrapper',
-  tableSelected: 'LexicalTheme__tableSelected',
-  tableSelection: 'LexicalTheme__tableSelection',
   text: {
     bold: 'LexicalTheme__textBold',
     capitalize: 'LexicalTheme__textCapitalize',

packages/root-cms/ui/components/RichTextEditor/LexicalTheme.tsx

@@ -0,0 +1,7 @@
+.EmbedModal__buttons {
+  margin-top: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+}