@bendyline/squisq-editor-react 1.6.2 → 2.0.0

package/src/timeline/timelineOps.ts

@@ -0,0 +1,277 @@
+/**
+ * Pure edits over the authored ASCII timeline model.
+ *
+ * The code fence remains the source of truth. Canvas coordinates are
+ * normalized to the same global, shared scale used by
+ * `asciiTimelineToTemplateData`; commands render the edited model back into
+ * canonical fence text after applying one of these operations.
+ */
+
+import type {
+  AsciiTimeline,
+  AsciiTimelineEvent,
+  AsciiTimelineMarker,
+  AsciiTimelineSide,
+} from '@bendyline/squisq/doc';
+
+const STRUCTURAL_MARKERS = /[●○◉◆◇•]+/gu;
+const LEADING_RAILS = /^[─━═╌╍┄┅┈┉-]+/u;
+const COORDINATE_PRECISION = 1_000;
+const COLUMN_EPSILON = 1 / COORDINATE_PRECISION / 2;
+
+export interface TimelineEventPatch {
+  label?: string;
+  /** `null` clears the optional description. */
+  description?: string | null;
+  side?: AsciiTimelineSide;
+  /** `null` restores the label side/default placement. */
+  descriptionSide?: AsciiTimelineSide | null;
+  callout?: boolean;
+  marker?: AsciiTimelineMarker;
+  /** Normalized position on the global timeline scale. */
+  position?: number;
+}
+
+export interface AddTimelineEventOptions {
+  id?: string;
+  label?: string;
+  description?: string;
+  side?: AsciiTimelineSide;
+  descriptionSide?: AsciiTimelineSide;
+  callout?: boolean;
+  marker?: AsciiTimelineMarker;
+}
+
+export interface AddTimelineEventResult {
+  timeline: AsciiTimeline;
+  eventId: string;
+}
+
+/**
+ * Normalize editable one-line prose exactly as the canonical core renderer
+ * does. This prevents the verified command path from accepting a value that
+ * is silently reinterpreted as timeline syntax on its first render.
+ */
+export function sanitizeTimelineText(value: string): string {
+  const normalized = value
+    .normalize('NFC')
+    .replace(/[\r\n\t]+/g, ' ')
+    .replace(STRUCTURAL_MARKERS, '·')
+    .replace(/\*/g, '∗')
+    .replace(/::/g, '∶')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  return normalized.replace(LEADING_RAILS, (run) =>
+    Array.from(run, (character) => (character === '-' ? '−' : '–')).join(''),
+  );
+}
+
+/** Return a globally unique, renderer-safe event id. */
+export function nextTimelineEventId(timeline: AsciiTimeline, base = 'event'): string {
+  const used = new Set(timeline.tracks.flatMap((track) => track.events.map((event) => event.id)));
+  const safeBase = safeId(base) || 'event';
+  if (!used.has(safeBase)) return safeBase;
+  let suffix = 2;
+  while (used.has(`${safeBase}-${suffix}`)) suffix++;
+  return `${safeBase}-${suffix}`;
+}
+
+/**
+ * Add a visible point to `trackId` at a normalized global rail position.
+ * Returns the stable id so the canvas can select/focus the new point after
+ * the fence rewrite.
+ */
+export function addTimelineEventOp(
+  timeline: AsciiTimeline,
+  trackId: string,
+  position: number,
+  options: AddTimelineEventOptions = {},
+): AddTimelineEventResult | null {
+  if (!Number.isFinite(position)) return null;
+  const track = timeline.tracks.find((candidate) => candidate.id === trackId);
+  if (!track) return null;
+
+  const column = columnAtPosition(timeline, position);
+  // Two coincident markers cannot be independently hit on the canvas. A
+  // marker click should select the existing point rather than adding atop it.
+  if (track.events.some((event) => Math.abs(event.column - column) <= COLUMN_EPSILON)) return null;
+
+  const label = sanitizeTimelineText(options.label ?? '') || 'New event';
+  const description = sanitizeTimelineText(options.description ?? '');
+  const eventId = nextTimelineEventId(timeline, options.id ?? label);
+  const insertionIndex = track.events.filter((event) => event.column < column).length;
+  const side = options.side ?? (insertionIndex % 2 === 0 ? 'above' : 'below');
+  const event: AsciiTimelineEvent = {
+    id: eventId,
+    label,
+    ...(description ? { description } : {}),
+    column,
+    side,
+    ...(description && options.descriptionSide ? { descriptionSide: options.descriptionSide } : {}),
+    ...(options.callout === false ? { callout: false } : {}),
+    marker: options.marker ?? 'filled',
+  };
+
+  const events = [...track.events, event].sort(
+    (left, right) => left.column - right.column || left.id.localeCompare(right.id),
+  );
+  const tracks = timeline.tracks.map((candidate) =>
+    candidate.id === trackId ? { ...candidate, events } : candidate,
+  );
+  // ASCII art has no distinct diamond glyph. Promote the authored vocabulary
+  // when the inspector explicitly requests one rather than silently folding
+  // the user's choice back to a filled point in the renderer.
+  const style = options.marker === 'diamond' ? 'unicode' : timeline.style;
+  return { timeline: { ...timeline, tracks, style }, eventId };
+}
+
+/** Update one point without changing its stable id or branch endpoints. */
+export function updateTimelineEventOp(
+  timeline: AsciiTimeline,
+  eventId: string,
+  patch: TimelineEventPatch,
+): AsciiTimeline {
+  const location = findEvent(timeline, eventId);
+  if (!location || Object.keys(patch).length === 0) return timeline;
+
+  const hasLabel = Object.prototype.hasOwnProperty.call(patch, 'label');
+  const hasDescription = Object.prototype.hasOwnProperty.call(patch, 'description');
+  const hasDescriptionSide = Object.prototype.hasOwnProperty.call(patch, 'descriptionSide');
+  const hasPosition = Object.prototype.hasOwnProperty.call(patch, 'position');
+  const label = hasLabel ? sanitizeTimelineText(patch.label ?? '') : location.event.label;
+  if (!label) return timeline;
+
+  let description = hasDescription
+    ? sanitizeTimelineText(patch.description ?? '')
+    : location.event.description;
+  if (!description) description = undefined;
+
+  let column = location.event.column;
+  if (hasPosition) {
+    if (!Number.isFinite(patch.position)) return timeline;
+    column = columnAtPosition(timeline, patch.position as number);
+    const collision = location.track.events.some(
+      (event) => event.id !== eventId && Math.abs(event.column - column) <= COLUMN_EPSILON,
+    );
+    if (collision) return timeline;
+  }
+
+  const editedText = hasLabel || hasDescription;
+  const callout =
+    patch.callout !== undefined
+      ? patch.callout
+      : editedText && location.event.callout === false
+        ? true
+        : location.event.callout;
+  const descriptionSide = !description
+    ? undefined
+    : hasDescriptionSide
+      ? (patch.descriptionSide ?? undefined)
+      : location.event.descriptionSide;
+
+  const nextEvent: AsciiTimelineEvent = {
+    ...location.event,
+    label,
+    column,
+    ...(description ? { description } : {}),
+    ...(patch.side ? { side: patch.side } : {}),
+    ...(descriptionSide ? { descriptionSide } : {}),
+    ...(callout !== undefined ? { callout } : {}),
+    ...(patch.marker ? { marker: patch.marker } : {}),
+  };
+  if (!description) delete nextEvent.description;
+  if (!descriptionSide) delete nextEvent.descriptionSide;
+
+  if (eventsEqual(location.event, nextEvent)) return timeline;
+  const events = location.track.events
+    .map((event) => (event.id === eventId ? nextEvent : event))
+    .sort((left, right) => left.column - right.column || left.id.localeCompare(right.id));
+  // A point authored exactly on a track boundary anchors that edge. Let the
+  // old scale remain stable throughout a drag preview, then move/reassign the
+  // boundary in the single drop transaction. Crossing the next point hands
+  // the edge to that point; moving any point outside a shorter track expands
+  // the track so every marker remains inside its authored bounds.
+  const movedPosition = hasPosition && nextEvent.column !== location.event.column;
+  const anchoredStart =
+    movedPosition && Math.abs(location.event.column - location.track.startColumn) <= COLUMN_EPSILON;
+  const anchoredEnd =
+    movedPosition && Math.abs(location.event.column - location.track.endColumn) <= COLUMN_EPSILON;
+  const eventStart = Math.min(...events.map((event) => event.column));
+  const eventEnd = Math.max(...events.map((event) => event.column));
+  const startColumn = anchoredStart ? eventStart : Math.min(location.track.startColumn, eventStart);
+  const endColumn = anchoredEnd ? eventEnd : Math.max(location.track.endColumn, eventEnd);
+  const tracks = timeline.tracks.map((track) =>
+    track.id === location.track.id ? { ...track, startColumn, endColumn, events } : track,
+  );
+  const style = patch.marker === 'diamond' ? 'unicode' : timeline.style;
+  return { ...timeline, tracks, style };
+}
+
+/**
+ * Remove a point and every incident branch. Empty tracks are removed because
+ * the canonical renderer cannot represent them. The last point in the whole
+ * timeline is retained so an edit cannot erase its own source fence/widget.
+ */
+export function removeTimelineEventOp(timeline: AsciiTimeline, eventId: string): AsciiTimeline {
+  const location = findEvent(timeline, eventId);
+  if (!location) return timeline;
+  const eventCount = timeline.tracks.reduce((sum, track) => sum + track.events.length, 0);
+  if (eventCount <= 1) return timeline;
+
+  const tracks = timeline.tracks
+    .map((track) =>
+      track.id === location.track.id
+        ? { ...track, events: track.events.filter((event) => event.id !== eventId) }
+        : track,
+    )
+    .filter((track) => track.events.length > 0);
+  const links = timeline.links.filter((link) => link.source !== eventId && link.target !== eventId);
+  return { ...timeline, tracks, links };
+}
+
+function globalBounds(timeline: AsciiTimeline): { start: number; span: number } {
+  if (timeline.tracks.length === 0) return { start: 0, span: 1 };
+  const start = Math.min(...timeline.tracks.map((track) => track.startColumn));
+  const end = Math.max(...timeline.tracks.map((track) => track.endColumn));
+  return { start, span: Math.max(1, end - start) };
+}
+
+function columnAtPosition(timeline: AsciiTimeline, position: number): number {
+  const { start, span } = globalBounds(timeline);
+  const clamped = Math.max(0, Math.min(1, position));
+  return Math.round((start + clamped * span) * COORDINATE_PRECISION) / COORDINATE_PRECISION;
+}
+
+function safeId(value: string): string {
+  return (
+    sanitizeTimelineText(value)
+      .toLowerCase()
+      .replace(/[^a-z0-9_.~-]+/g, '-')
+      .replace(/^-+|-+$/g, '') || 'event'
+  );
+}
+
+function findEvent(
+  timeline: AsciiTimeline,
+  eventId: string,
+): { track: AsciiTimeline['tracks'][number]; event: AsciiTimelineEvent } | null {
+  for (const track of timeline.tracks) {
+    const event = track.events.find((candidate) => candidate.id === eventId);
+    if (event) return { track, event };
+  }
+  return null;
+}
+
+function eventsEqual(left: AsciiTimelineEvent, right: AsciiTimelineEvent): boolean {
+  return (
+    left.id === right.id &&
+    left.label === right.label &&
+    left.description === right.description &&
+    left.column === right.column &&
+    left.side === right.side &&
+    left.descriptionSide === right.descriptionSide &&
+    left.callout === right.callout &&
+    left.marker === right.marker
+  );
+}

package/src/timeline/timelinePaste.ts

@@ -0,0 +1,8 @@
+/** Paste gate for bare, high-confidence Unicode timeline art. */
+
+import { detectAsciiTimeline } from '@bendyline/squisq/doc';
+
+export function shouldPasteAsTimelineFence(text: string): boolean {
+  if (!text.trim() || /^\s*```/m.test(text)) return false;
+  return detectAsciiTimeline(text).isTimeline;
+}

package/src/tiptapBridge.ts

@@ -11,7 +11,6 @@
  * using squisq's own parser.
  */
 
-import { templateLabel } from './TemplatePicker';
 import { resolveIcon } from '@bendyline/squisq/icons';
 import {
   matchTrailingTemplateAnnotation,
@@ -251,6 +250,11 @@ export function markdownToTiptap(markdown: string): string {
         // tokens are stored raw — quotes included — so tiptapToMarkdown
         // can re-join them into the annotation verbatim.
         const tokens = tokenizeAttrTokens(templateInner);
+        if (tokens.length === 0) {
+          // Preserve an authored `{[]}` through the editable Tiptap document
+          // while keeping the raw marker out of the visible heading text.
+          attrs += ' data-template-empty="true"';
+        }
         const firstIsParam = tokens.length > 0 && tokens[0].indexOf('=') > 0;
         if (!firstIsParam && tokens[0]) {
           attrs += ` data-template="${escapeHtml(tokens[0])}"`;
@@ -409,7 +413,16 @@ export function tiptapToMarkdown(html: string): string {
     if (headingMatch) {
       const level = parseInt(headingMatch[1], 10);
       const attrs = headingMatch[2];
-      let text = htmlToInline(headingMatch[3]);
+      const headingHtml = headingMatch[3];
+      // Template/property badges are editor chrome, not heading content. Strip
+      // them structurally before converting the inline HTML. Older builds
+      // briefly rendered the template label as real badge text; using the
+      // markup boundary preserves that cleanup without mistaking a legitimate
+      // heading suffix (for example "A Famous Quote") for the badge label.
+      const chromeStart = headingHtml.search(
+        /<span\b[^>]*\bclass="[^"]*\bsquisq-(?:template|props)-badge\b[^"]*"[^>]*>/i,
+      );
+      let text = htmlToInline(chromeStart >= 0 ? headingHtml.slice(0, chromeStart) : headingHtml);
 
       // Re-inject heading annotations from data attributes. Canonical
       // emit order: Pandoc `{#…}` first, then squisq `{[…]}` annotation
@@ -417,15 +430,7 @@ export function tiptapToMarkdown(html: string): string {
       const blockAttrsMatch = attrs.match(/data-block-attrs="([^"]*)"/);
       const tmplMatch = attrs.match(/data-template="([^"]+)"/);
       const paramsMatch = attrs.match(/data-template-params="([^"]+)"/);
-      if (tmplMatch) {
-        // Strip an accidental trailing copy of the template label that an
-        // earlier broken build briefly rendered as real text inside the
-        // badge. Existing documents self-heal on save.
-        const label = templateLabel(tmplMatch[1]);
-        if (label && text.endsWith(label)) {
-          text = text.slice(0, -label.length).trimEnd();
-        }
-      }
+      const hasEmptyTemplateAnnotation = /\sdata-template-empty(?:="[^"]*")?/.test(attrs);
       if (blockAttrsMatch) {
         const inner = unescapeHtml(blockAttrsMatch[1]);
         text += ` {${inner}}`;
@@ -436,6 +441,8 @@ export function tiptapToMarkdown(html: string): string {
           annotation += (annotation ? ' ' : '') + unescapeHtml(paramsMatch[1]);
         }
         text += ` {[${annotation}]}`;
+      } else if (hasEmptyTemplateAnnotation) {
+        text += ' {[]}';
       }
 
       lines.push('#'.repeat(level) + ' ' + text);
@@ -444,12 +451,13 @@ export function tiptapToMarkdown(html: string): string {
       continue;
     }
 
-    // Code blocks
-    const codeMatch = remaining.match(
-      /^<pre><code(?:\s+class="language-([^"]*)")?>(.*?)<\/code><\/pre>/s,
-    );
+    // Code blocks — tolerate attributes on <pre> and <code>: real
+    // editor.getHTML() output carries class="squisq-code-block" on the
+    // <pre> (StarterKit codeBlock HTMLAttributes), which a bare
+    // `<pre><code` anchor never matches, silently dropping the fence.
+    const codeMatch = remaining.match(/^<pre\b[^>]*><code\b([^>]*)>(.*?)<\/code><\/pre>/s);
     if (codeMatch) {
-      const lang = codeMatch[1] || '';
+      const lang = /\bclass="language-([^"]*)"/.exec(codeMatch[1] ?? '')?.[1] ?? '';
       const code = unescapeHtml(codeMatch[2]);
       lines.push('```' + lang);
       lines.push(code);

package/src/transformStyleId.ts

@@ -0,0 +1,17 @@
+import { getTransformStyleSummaries } from '@bendyline/squisq/transform';
+
+const VALID_TRANSFORM_IDS = new Set(getTransformStyleSummaries().map((summary) => summary.id));
+
+/**
+ * Normalize a transform id read from document frontmatter.
+ *
+ * `dataDriven` was written by older Squisq versions. It remains accepted as a
+ * wire-format compatibility value, but every editor surface exposes and writes
+ * only the canonical `data-driven` id.
+ */
+export function resolvePersistedTransformStyleId(value: unknown): string | null {
+  if (typeof value !== 'string') return null;
+  const normalized = value.trim().toLowerCase().replace(/\s+/g, '-');
+  if (normalized === 'datadriven') return 'data-driven';
+  return VALID_TRANSFORM_IDS.has(normalized) ? normalized : null;
+}

package/src/treeview/TreeOutlineWidget.tsx

@@ -0,0 +1,240 @@
+/**
+ * TreeOutlineWidget — the interactive outline editor mounted below a hidden
+ * ASCII tree fence. Reads the live tree via `useTreeViewData` and writes
+ * every structural edit back as regenerated tree art via `applyTreeCommand`
+ * (op → render → verify → single-transaction fence rewrite).
+ *
+ * Manage-items UX: a toolbar (add file / add folder), inline-editable
+ * labels, per-row controls (add child, indent/outdent, move up/down,
+ * folder⇄file, delete), and collapse chevrons (widget-local, not
+ * persisted). Enter in a label adds a sibling; Backspace on an empty label
+ * deletes it.
+ */
+
+import { useCallback, useState } from 'react';
+import type { Editor } from '@tiptap/react';
+import type { TreeNode } from '@bendyline/squisq/doc';
+import { Icon } from '../Icon';
+import { useTreeViewData } from './treeViewData';
+import { applyTreeCommand, type TreeCommand } from './treeViewCommands';
+
+interface TreeOutlineWidgetProps {
+  editor: Editor;
+  blockId: string;
+  fallbackPos: number;
+  host?: HTMLElement | null;
+}
+
+export function TreeOutlineWidget({ editor, blockId }: TreeOutlineWidgetProps) {
+  const view = useTreeViewData(editor, blockId);
+  const [collapsed, setCollapsed] = useState<ReadonlySet<string>>(() => new Set());
+
+  const dispatch = useCallback(
+    (cmd: TreeCommand) => applyTreeCommand(editor, blockId, cmd),
+    [editor, blockId],
+  );
+  const toggleCollapse = useCallback((id: string) => {
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+
+  if (!view) return null;
+  const roots = view.tree.roots;
+  const firstRootId = roots[0]?.id;
+
+  return (
+    <div className="squisq-tree-outline">
+      <div className="squisq-tree-toolbar">
+        <button
+          type="button"
+          className="squisq-tree-btn"
+          title="Add file"
+          disabled={!firstRootId}
+          onClick={() =>
+            firstRootId
+              ? dispatch({ kind: 'addItem', targetId: firstRootId, position: 'siblingAfter' })
+              : undefined
+          }
+        >
+          <Icon icon="fa-solid fa-plus" /> Item
+        </button>
+        <button
+          type="button"
+          className="squisq-tree-btn"
+          title="Add folder"
+          disabled={!firstRootId}
+          onClick={() =>
+            firstRootId
+              ? dispatch({
+                  kind: 'addItem',
+                  targetId: firstRootId,
+                  position: 'siblingAfter',
+                  isDir: true,
+                })
+              : undefined
+          }
+        >
+          <Icon icon="fa-solid fa-folder-plus" /> Folder
+        </button>
+      </div>
+
+      <ul className="squisq-tree-rows" role="tree">
+        {roots.map((node) => (
+          <TreeRowView
+            key={node.id}
+            node={node}
+            depth={0}
+            collapsed={collapsed}
+            toggleCollapse={toggleCollapse}
+            dispatch={dispatch}
+          />
+        ))}
+      </ul>
+
+      {view.warnings.length > 0 ? (
+        <div className="squisq-tree-warnings">
+          {view.warnings.length} parser note{view.warnings.length === 1 ? '' : 's'}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function TreeRowView({
+  node,
+  depth,
+  collapsed,
+  toggleCollapse,
+  dispatch,
+}: {
+  node: TreeNode;
+  depth: number;
+  collapsed: ReadonlySet<string>;
+  toggleCollapse: (id: string) => void;
+  dispatch: (cmd: TreeCommand) => boolean;
+}) {
+  const hasChildren = node.children.length > 0;
+  const isCollapsed = collapsed.has(node.id);
+  const isDir = node.isDir || hasChildren;
+  const [draft, setDraft] = useState(node.label);
+
+  const commit = () => {
+    if (draft !== node.label && draft.trim().length > 0) {
+      dispatch({ kind: 'renameItem', id: node.id, label: draft });
+    }
+  };
+
+  return (
+    <li role="treeitem" style={{ paddingLeft: `${depth * 18}px` }}>
+      <div className="squisq-tree-row">
+        {hasChildren ? (
+          <button
+            type="button"
+            className="squisq-tree-chevron"
+            aria-label={isCollapsed ? 'Expand' : 'Collapse'}
+            onClick={() => toggleCollapse(node.id)}
+          >
+            <Icon icon={`fa-solid ${isCollapsed ? 'fa-chevron-right' : 'fa-chevron-down'}`} />
+          </button>
+        ) : (
+          <span className="squisq-tree-chevron squisq-tree-chevron--empty" />
+        )}
+        <button
+          type="button"
+          className="squisq-tree-icon"
+          title={isDir ? 'Make a file' : 'Make a folder'}
+          onClick={() => dispatch({ kind: 'toggleDir', id: node.id })}
+        >
+          <Icon icon={`fa-solid ${isDir ? 'fa-folder' : 'fa-file'}`} />
+        </button>
+        <input
+          className="squisq-tree-label"
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          onBlur={commit}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              commit();
+              dispatch({ kind: 'addItem', targetId: node.id, position: 'siblingAfter' });
+            } else if (e.key === 'Backspace' && draft.length === 0) {
+              e.preventDefault();
+              dispatch({ kind: 'removeItem', id: node.id });
+            } else if (e.key === 'Tab') {
+              // Structural indent/outdent operate on the committed label's id;
+              // commit the draft first so no typing is lost.
+              e.preventDefault();
+              commit();
+              dispatch({ kind: e.shiftKey ? 'outdentItem' : 'indentItem', id: node.id });
+            }
+          }}
+        />
+        <span className="squisq-tree-controls">
+          <button
+            type="button"
+            title="Add child"
+            onClick={() => dispatch({ kind: 'addItem', targetId: node.id, position: 'child' })}
+          >
+            <Icon icon="fa-solid fa-plus" />
+          </button>
+          <button
+            type="button"
+            title="Outdent"
+            onClick={() => dispatch({ kind: 'outdentItem', id: node.id })}
+          >
+            <Icon icon="fa-solid fa-outdent" />
+          </button>
+          <button
+            type="button"
+            title="Indent"
+            onClick={() => dispatch({ kind: 'indentItem', id: node.id })}
+          >
+            <Icon icon="fa-solid fa-indent" />
+          </button>
+          <button
+            type="button"
+            title="Move up"
+            onClick={() => dispatch({ kind: 'moveItemUp', id: node.id })}
+          >
+            <Icon icon="fa-solid fa-arrow-up" />
+          </button>
+          <button
+            type="button"
+            title="Move down"
+            onClick={() => dispatch({ kind: 'moveItemDown', id: node.id })}
+          >
+            <Icon icon="fa-solid fa-arrow-down" />
+          </button>
+          <button
+            type="button"
+            title="Delete"
+            className="squisq-tree-delete"
+            onClick={() => dispatch({ kind: 'removeItem', id: node.id })}
+          >
+            <Icon icon="fa-solid fa-trash" />
+          </button>
+        </span>
+      </div>
+      {hasChildren && !isCollapsed ? (
+        <ul className="squisq-tree-rows" role="group">
+          {node.children.map((child) => (
+            <TreeRowView
+              key={child.id}
+              node={child}
+              depth={depth + 1}
+              collapsed={collapsed}
+              toggleCollapse={toggleCollapse}
+              dispatch={dispatch}
+            />
+          ))}
+        </ul>
+      ) : null}
+    </li>
+  );
+}
+
+export default TreeOutlineWidget;