@eventuras/scribo 0.8.3 → 0.10.7

package/src/nodes/schedule/ScheduleItem.css

@@ -0,0 +1,140 @@
+/* Schedule item wrapper */
+.schedule-item-wrapper + .schedule-item-wrapper {
+  margin-top: 0;
+}
+
+/* Main editor row */
+.schedule-item-editor {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  padding: 0.375rem 0.5rem;
+  border-radius: 0.375rem;
+  background: rgba(74, 142, 161, 0.06);
+  border: 1px solid rgba(74, 142, 161, 0.15);
+  transition:
+    border-color 0.15s,
+    opacity 0.15s;
+}
+
+.schedule-item-editor--selected {
+  border-color: rgba(74, 142, 161, 0.4);
+}
+
+.schedule-item-editor--dragging {
+  opacity: 0.4;
+}
+
+/* Drag handle */
+.schedule-item-drag {
+  cursor: grab;
+  border: none;
+  background: transparent;
+  padding: 0.125rem;
+  color: rgba(0, 0, 0, 0.25);
+  font-size: 0.875rem;
+  line-height: 1;
+  letter-spacing: -0.05em;
+  flex-shrink: 0;
+  user-select: none;
+}
+
+.schedule-item-drag:hover {
+  color: rgba(0, 0, 0, 0.5);
+}
+
+.schedule-item-drag:active {
+  cursor: grabbing;
+}
+
+/* Input fields */
+.schedule-item-editor input {
+  border: none;
+  background: transparent;
+  font: inherit;
+  padding: 0.125rem 0.25rem;
+  border-radius: 0.25rem;
+  outline: none;
+  min-width: 0;
+}
+
+.schedule-item-editor input:focus {
+  background: rgba(255, 255, 255, 0.8);
+}
+
+.schedule-item-time {
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  width: 8rem;
+  flex-shrink: 0;
+}
+
+.schedule-item-title {
+  font-weight: 600;
+  flex: 2;
+}
+
+.schedule-item-speaker {
+  flex: 1;
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.schedule-item-description {
+  flex: 2;
+  color: rgba(0, 0, 0, 0.5);
+  font-size: 0.9em;
+}
+
+.schedule-item-editor input::placeholder {
+  color: rgba(0, 0, 0, 0.25);
+}
+
+/* Remove button */
+.schedule-item-remove {
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  background: #f5f5f5;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  color: #666666;
+  font-size: 1rem;
+  line-height: 1;
+  flex-shrink: 0;
+  border-radius: 0.25rem;
+  transition:
+    color 0.15s,
+    background 0.15s,
+    border-color 0.15s;
+}
+
+.schedule-item-remove:hover {
+  color: #b91c1c;
+  background: #f8e8e8;
+  border-color: rgba(185, 28, 28, 0.3);
+}
+
+/* Add button — only on last item */
+.schedule-item-add {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin-top: 0.375rem;
+  padding: 0.375rem;
+  border: 1px dashed rgba(74, 142, 161, 0.35);
+  border-radius: 0.375rem;
+  background: #f4f8f9;
+  cursor: pointer;
+  color: #3a7287;
+  font-size: 1rem;
+  font-weight: 600;
+  transition:
+    border-color 0.15s,
+    color 0.15s,
+    background 0.15s;
+}
+
+.schedule-item-add:hover {
+  border-color: rgba(74, 142, 161, 0.6);
+  color: #2f5f6d;
+  background: #e9f1f4;
+}

package/src/nodes/schedule/ScheduleItemComponent.tsx

@@ -0,0 +1,195 @@
+import './ScheduleItem.css';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
+import { $createParagraphNode, $getNodeByKey, type NodeKey } from 'lexical';
+import { type DragEvent, useCallback, useEffect, useRef, useState } from 'react';
+
+import {
+  $createScheduleItemNode,
+  $isScheduleItemNode,
+  type ScheduleItemData,
+} from './ScheduleItemNode';
+
+interface ScheduleItemComponentProps {
+  nodeKey: NodeKey;
+  data: ScheduleItemData;
+}
+
+export const ScheduleItemComponent = ({ nodeKey, data }: ScheduleItemComponentProps) => {
+  const [editor] = useLexicalComposerContext();
+  const [isSelected, _setSelected, _clearSelection] = useLexicalNodeSelection(nodeKey);
+  const [localData, setLocalData] = useState(data);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isLast, setIsLast] = useState(false);
+  const timeRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    setLocalData(data);
+  }, [data]);
+
+  // Check if this is the last schedule item (show + button only on last)
+  useEffect(() => {
+    return editor.registerUpdateListener(() => {
+      editor.getEditorState().read(() => {
+        const node = $getNodeByKey(nodeKey);
+        if (!node) return;
+        const next = node.getNextSibling();
+        setIsLast(!next || !$isScheduleItemNode(next));
+      });
+    });
+  }, [editor, nodeKey]);
+
+  const updateNode = useCallback(
+    (updated: ScheduleItemData) => {
+      editor.update(() => {
+        const node = $getNodeByKey(nodeKey);
+        if ($isScheduleItemNode(node)) {
+          node.setData(updated);
+        }
+      });
+    },
+    [editor, nodeKey]
+  );
+
+  const handleChange = (field: keyof ScheduleItemData, value: string) => {
+    const nextRaw: ScheduleItemData = {
+      ...localData,
+      time: field === 'time' ? value : localData.time,
+      title: field === 'title' ? value : localData.title,
+      speaker: field === 'speaker' ? value || undefined : localData.speaker,
+      description: field === 'description' ? value || undefined : localData.description,
+    };
+    const persisted: ScheduleItemData = {
+      ...nextRaw,
+      time: nextRaw.time.trim(),
+    };
+
+    setLocalData(nextRaw);
+    updateNode(persisted);
+  };
+
+  const insertAfter = () => {
+    editor.update(() => {
+      const node = $getNodeByKey(nodeKey);
+      if (!node) return;
+      const newNode = $createScheduleItemNode({ time: '', title: '' });
+      node.insertAfter(newNode);
+      newNode.selectEnd();
+    });
+  };
+
+  const removeNode = () => {
+    editor.update(() => {
+      const node = $getNodeByKey(nodeKey);
+      if (!node) return;
+      const next = node.getNextSibling();
+      const prev = node.getPreviousSibling();
+      if (!next && !prev) {
+        const p = $createParagraphNode();
+        node.replace(p);
+        p.selectEnd();
+      } else {
+        node.remove();
+      }
+    });
+  };
+
+  const handleDragStart = (e: DragEvent) => {
+    e.dataTransfer.setData('text/plain', nodeKey);
+    e.dataTransfer.effectAllowed = 'move';
+    setIsDragging(true);
+  };
+
+  const handleDragEnd = () => setIsDragging(false);
+
+  const handleDragOver = (e: DragEvent) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+  };
+
+  const handleDrop = (e: DragEvent) => {
+    e.preventDefault();
+    const sourceKey = e.dataTransfer.getData('text/plain');
+    if (!sourceKey || sourceKey === nodeKey) return;
+    editor.update(() => {
+      const sourceNode = $getNodeByKey(sourceKey);
+      const targetNode = $getNodeByKey(nodeKey);
+      if (!sourceNode || !targetNode || !$isScheduleItemNode(sourceNode)) return;
+      targetNode.insertBefore(sourceNode);
+    });
+  };
+
+  return (
+    <div className="schedule-item-wrapper">
+      <div
+        role="group"
+        aria-label="Schedule item"
+        className={`schedule-item-editor ${isSelected ? 'schedule-item-editor--selected' : ''} ${isDragging ? 'schedule-item-editor--dragging' : ''}`}
+        onDragOver={handleDragOver}
+        onDrop={handleDrop}
+      >
+        <button
+          type="button"
+          className="schedule-item-drag"
+          draggable
+          onDragStart={handleDragStart}
+          onDragEnd={handleDragEnd}
+          title="Drag to reorder"
+          aria-label="Drag to reorder"
+        >
+          ⠿
+        </button>
+        <input
+          ref={timeRef}
+          className="schedule-item-time"
+          type="text"
+          value={localData.time}
+          onChange={(e) => handleChange('time', e.target.value)}
+          placeholder="09:00–10:00"
+          size={13}
+        />
+        <input
+          className="schedule-item-title"
+          type="text"
+          value={localData.title}
+          onChange={(e) => handleChange('title', e.target.value)}
+          placeholder="Title"
+        />
+        <input
+          className="schedule-item-speaker"
+          type="text"
+          value={localData.speaker ?? ''}
+          onChange={(e) => handleChange('speaker', e.target.value)}
+          placeholder="Speaker"
+        />
+        <input
+          className="schedule-item-description"
+          type="text"
+          value={localData.description ?? ''}
+          onChange={(e) => handleChange('description', e.target.value)}
+          placeholder="Description"
+        />
+        <button
+          type="button"
+          className="schedule-item-remove"
+          onClick={removeNode}
+          title="Remove item"
+          aria-label="Remove schedule item"
+        >
+          ×
+        </button>
+      </div>
+      {isLast && (
+        <button
+          type="button"
+          className="schedule-item-add"
+          onClick={insertAfter}
+          title="Add item"
+          aria-label="Add schedule item"
+        >
+          +
+        </button>
+      )}
+    </div>
+  );
+};

package/src/nodes/schedule/ScheduleItemNode.ts

@@ -0,0 +1,135 @@
+import {
+  $applyNodeReplacement,
+  DecoratorNode,
+  type DOMConversionMap,
+  type DOMExportOutput,
+  type LexicalNode,
+  type NodeKey,
+  type SerializedLexicalNode,
+  type Spread,
+} from 'lexical';
+import { createElement, type ReactElement } from 'react';
+
+import { ScheduleItemComponent } from './ScheduleItemComponent';
+
+export interface ScheduleItemData {
+  time: string;
+  title: string;
+  speaker?: string;
+  description?: string;
+}
+
+export type SerializedScheduleItemNode = Spread<{ data: ScheduleItemData }, SerializedLexicalNode>;
+
+export class ScheduleItemNode extends DecoratorNode<ReactElement> {
+  __data: ScheduleItemData;
+
+  static getType(): string {
+    return 'schedule-item';
+  }
+
+  static clone(node: ScheduleItemNode): ScheduleItemNode {
+    return new ScheduleItemNode({ ...node.__data }, node.__key);
+  }
+
+  constructor(data: ScheduleItemData, key?: NodeKey) {
+    super(key);
+    this.__data = data;
+  }
+
+  getData(): ScheduleItemData {
+    return this.getLatest().__data;
+  }
+
+  setData(data: ScheduleItemData): void {
+    const self = this.getWritable();
+    self.__data = data;
+  }
+
+  // --- DOM ---
+
+  createDOM(): HTMLElement {
+    const div = document.createElement('div');
+    div.className = 'schedule-item';
+    return div;
+  }
+
+  updateDOM(): boolean {
+    return false;
+  }
+
+  static importDOM(): DOMConversionMap | null {
+    return {
+      div: (node: HTMLElement) => {
+        if (!node.classList.contains('schedule-item')) return null;
+        return {
+          conversion: () => {
+            const data = {
+              time: node.dataset.time ?? '',
+              title: node.dataset.title ?? '',
+              speaker: node.dataset.speaker || undefined,
+              description: node.dataset.description || undefined,
+            };
+            return { node: $createScheduleItemNode(data) };
+          },
+          priority: 1,
+        };
+      },
+    };
+  }
+
+  exportDOM(): DOMExportOutput {
+    const el = document.createElement('div');
+    el.className = 'schedule-item';
+    el.dataset.time = this.__data.time;
+    el.dataset.title = this.__data.title;
+    if (this.__data.speaker) el.dataset.speaker = this.__data.speaker;
+    if (this.__data.description) el.dataset.description = this.__data.description;
+    return { element: el };
+  }
+
+  // --- Serialization ---
+
+  static importJSON(json: SerializedScheduleItemNode): ScheduleItemNode {
+    return $createScheduleItemNode(json.data);
+  }
+
+  exportJSON(): SerializedScheduleItemNode {
+    return {
+      ...super.exportJSON(),
+      type: 'schedule-item',
+      data: this.__data,
+    };
+  }
+
+  // --- Text ---
+
+  getTextContent(): string {
+    const { time, title, speaker, description } = this.__data;
+    const parts = [title, speaker, description].filter(Boolean);
+    return `${time} ${parts.join(' | ')}`;
+  }
+
+  isInline(): boolean {
+    return false;
+  }
+
+  // --- Decorator (React rendering is handled by the component) ---
+
+  decorate(): ReactElement {
+    return createElement(ScheduleItemComponent, {
+      nodeKey: this.__key,
+      data: this.__data,
+    });
+  }
+}
+
+export function $createScheduleItemNode(data: ScheduleItemData): ScheduleItemNode {
+  return $applyNodeReplacement(new ScheduleItemNode(data));
+}
+
+export function $isScheduleItemNode(
+  node: LexicalNode | null | undefined
+): node is ScheduleItemNode {
+  return node instanceof ScheduleItemNode;
+}

package/src/nodes/schedule/ScheduleTransformer.ts

@@ -0,0 +1,80 @@
+import type { ElementTransformer } from '@lexical/markdown';
+
+import {
+  $createScheduleItemNode,
+  $isScheduleItemNode,
+  type ScheduleItemData,
+  ScheduleItemNode,
+} from './ScheduleItemNode';
+
+/**
+ * Markdown format: `- **09:00–10:00** Title | Speaker | Description`
+ *
+ * This matches the format expected by the remarkSchedule plugin in
+ * markdown-plugin-happening, so the same markdown renders correctly
+ * both in the editor and on the frontend.
+ */
+const SCHEDULE_ITEM_REGEX =
+  /^-\s+\*\*(\d{1,2}[.:]\d{2}(?:\s*[–-]\s*\d{1,2}[.:]\d{2})?)\s*\*\*\s+(.+)$/;
+
+export function normalizeScheduleItemData(data: {
+  time: string;
+  title: string;
+  speaker?: string;
+  description?: string;
+}) {
+  return {
+    time: data.time.trim(),
+    title: data.title.trim(),
+    speaker: data.speaker?.trim() || undefined,
+    description: data.description?.trim() || undefined,
+  };
+}
+
+export function parseScheduleItemMarkdown(markdown: string) {
+  const match = markdown.match(SCHEDULE_ITEM_REGEX);
+  if (!match) return null;
+
+  const time = (match[1] ?? '').replaceAll('.', ':').trim();
+  const rest = (match[2] ?? '').trim();
+  const parts = rest.split('|').map((s) => s.trim());
+
+  return normalizeScheduleItemData({
+    time,
+    title: parts[0] ?? '',
+    speaker: parts[1] || undefined,
+    description: parts[2] || undefined,
+  });
+}
+
+export function formatScheduleItemMarkdown(data: ScheduleItemData): string {
+  const normalized = normalizeScheduleItemData(data);
+  const parts = [normalized.title, normalized.speaker, normalized.description].filter(Boolean);
+  return `- **${normalized.time}** ${parts.join(' | ')}`;
+}
+
+export const SCHEDULE_ITEM_TRANSFORMER: ElementTransformer = {
+  type: 'element',
+  dependencies: [ScheduleItemNode],
+
+  regExp: SCHEDULE_ITEM_REGEX,
+
+  export: (node) => {
+    if (!$isScheduleItemNode(node)) return null;
+
+    return formatScheduleItemMarkdown(node.getData());
+  },
+
+  replace: (parentNode, _children, match) => {
+    const parsed = parseScheduleItemMarkdown(match[0] ?? '');
+
+    const node = $createScheduleItemNode(
+      parsed ?? {
+        time: ((match[1] ?? '').replaceAll('.', ':').trim() || '').trim(),
+        title: '',
+      }
+    );
+
+    parentNode.replace(node);
+  },
+};

package/src/nodes/schedule/index.ts

@@ -0,0 +1,4 @@
+export type { ScheduleItemData, SerializedScheduleItemNode } from './ScheduleItemNode';
+export { $createScheduleItemNode, $isScheduleItemNode, ScheduleItemNode } from './ScheduleItemNode';
+export { SCHEDULE_ITEM_TRANSFORMER } from './ScheduleTransformer';
+export { schedulePlugin } from './schedulePlugin';

package/src/nodes/schedule/schedulePlugin.ts

@@ -0,0 +1,33 @@
+import { $findMatchingParent } from '@lexical/utils';
+import { $getSelection, $isRangeSelection } from 'lexical';
+
+import type { ScriboPlugin } from '../../types';
+import { $createScheduleItemNode, ScheduleItemNode } from './ScheduleItemNode';
+import { SCHEDULE_ITEM_TRANSFORMER } from './ScheduleTransformer';
+
+export const schedulePlugin: ScriboPlugin = {
+  name: 'schedule',
+  nodes: [ScheduleItemNode],
+  transformers: [SCHEDULE_ITEM_TRANSFORMER],
+  toolbarButtons: [
+    {
+      key: 'schedule-item',
+      label: 'Schedule Item',
+      iconClass: 'schedule',
+      onSelect: (editor) => {
+        editor.update(() => {
+          const selection = $getSelection();
+          if (!$isRangeSelection(selection)) return;
+
+          const anchor = selection.anchor.getNode();
+          const topLevel =
+            $findMatchingParent(anchor, (n) => n.getParent()?.getType() === 'root') ?? anchor;
+
+          const node = $createScheduleItemNode({ time: '', title: '' });
+          topLevel.insertAfter(node);
+          node.selectEnd();
+        });
+      },
+    },
+  ],
+};

package/src/plugins/AutoLinkPlugin.tsx

@@ -6,19 +6,14 @@
  *
  */
 
-import type {JSX} from 'react';
-
-import {
-  AutoLinkPlugin,
-  createLinkMatcherWithRegExp,
-} from '@lexical/react/LexicalAutoLinkPlugin';
-import * as React from 'react';
+import { AutoLinkPlugin, createLinkMatcherWithRegExp } from '@lexical/react/LexicalAutoLinkPlugin';
+import type { JSX } from 'react';
 
 const URL_REGEX =
-  /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)(?<![-.+():%])/;
+  /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&/=]*)(?<![-.+():%])/;
 
 const EMAIL_REGEX =
-  /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
+  /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\])|(([a-zA-Z\-\d]+\.)+[a-zA-Z]{2,}))/;
 
 const MATCHERS = [
   createLinkMatcherWithRegExp(URL_REGEX, (text) => {
@@ -31,4 +26,4 @@ const MATCHERS = [
 
 export default function LexicalAutoLinkPlugin(): JSX.Element {
   return <AutoLinkPlugin matchers={MATCHERS} />;
-}
+}