@zuilib/text-editor 0.11.0 → 0.12.0

package/CHANGELOG.md

@@ -1,6 +1,169 @@
 # Changelog — @zuilib/text-editor
 
-## 0.11.0
+## 0.12.0 — Unreleased
+
+Not on npm yet: the latest published version is 0.11.1. This entry carries
+everything since then: the library-wide naming overhaul (clean break; only the
+persisted drawing format migrates), the extension API and first-party plugins,
+and the controlled-`value` rewrite. Features new in this release are described
+under their final names.
+
+### Breaking
+
+- Value triad: `onChange` → `onValueChange`; `foldable` → `collapsible`;
+  `defaultBlockWidth` → `newBlockWidth`; `measure` → `maxTextWidth`;
+  mode `'edit-md'` → `'edit-rich'`.
+- Lexical containment: all `$`-helpers, node classes and presets moved to the
+  new `@zuilib/text-editor/lexical` entry; the root barrel is Lexical-free.
+- Drawing data v3: shape `w`/`h` → `width`/`height` (v2 documents migrate on
+  load); `parseDrawingData` → `deserializeDrawingData`; `BoxType` →
+  `NodeShapeType`; geometry internals un-exported.
+- All module files kebab-cased.
+- Optional peer `@zuilib/tokens` is `^0.2.0` (token contract 2.0.0: the
+  stylesheet reads `--danger`, `--shadow-2`, …; `--zui-drawing-*` is declared
+  here now, not in the tokens package).
+- Peer dependencies added: `@lexical/selection` (block types, max length) and,
+  for the plugins, `@lexical/mark`, `@lexical/html`, `@lexical/clipboard`.
+  `tailwindcss` (^4) is declared as an optional peer: the document typography
+  classes need a Tailwind host that `@source`s this package.
+
+### Added
+
+- **Extension API.** `nodes` (appended to the built-in node classes),
+  `transformers` (an array goes before the built-ins; a function receives
+  them and returns the whole list), `nodeClassNames` (merged over the
+  built-in class map one level deep) and `onEditorReady` on `MarkdownEditor` /
+  `MarkdownEditor.Root`. All three lists are read on mount (the composer
+  cannot change nodes afterwards). Children of the root are plugins and
+  share the editor. `createMarkdownEditor(preset)` builds the component
+  around an `EditorPreset`
+- New entry points: `@zuilib/text-editor/markdown` (the editor without the
+  drawing canvas: no `DrawingNode`, transformers, button or canvas code),
+  `@zuilib/text-editor/drawing` (the canvas on its own: node, transformers,
+  `DrawingPlugin`, helpers) and `@zuilib/text-editor/lexical` (everything
+  Lexical-shaped). Insertion goes through `INSERT_DRAWING_COMMAND` so the
+  markdown hook has no drawing dependency
+- Exported the production lists on `./lexical`: `MARKDOWN_NODES`,
+  `MARKDOWN_TRANSFORMERS`, `MARKDOWN_PRESET`, `DRAWING_PRESET`,
+  `DRAWING_PRESET_NODES`, `DRAWING_PRESET_TRANSFORMERS`, `LISTS`,
+  `resolveTransformers`, `shortcutTransformers`, `editorNodeClassNames`,
+  `mergeNodeClassNames`
+- **Localisation.** One `EditorLabels` type covers every chrome string
+  (toolbar, outline, collapsible headings, table rails and shortcuts, layout
+  presets, drawing canvas, placeholder, character count); pass a deep partial
+  as `labels`. `DEFAULT_LABELS`, `resolveLabels`, `useLabels` exported. The
+  `CollapsibleHeadingsLabels`, `TableRowShortcutsLabels`,
+  `TableColumnShortcutsLabels` types are exported and their plugins default
+  to the editor's labels
+- **Toolbar.** A new **block** group (heading 1 to 3, bullet / numbered /
+  check list, quote) and a link button. `ToolbarItems` gains `block`;
+  `BlockButtons` and `MarkdownEditor.BlockButtons` exported.
+  `useMarkdownEditor()` gains `blockType` / `setBlockType`, `link` / `setLink`
+  and `hasSelection`. Toolbar dividers are `role="separator"`
+- **Link bubble.** The link button opens an edit bubble (URL input, apply,
+  remove) rather than inserting a placeholder `https://` link: it needs a
+  non-empty selection (disabled for a bare caret, so it cannot link the whole
+  text node around the caret) and nothing is written to the document until a
+  URL is applied. Escape, moving the caret or focus leaving the bubble
+  abandons it without any `onValueChange`. `setLink(url)` is a no-op for a
+  collapsed caret outside a link; `EDIT_LINK_COMMAND` opens the bubble
+- **Link safety.** `LinkPlugin` validates URLs with `isSafeUrl`:
+  `javascript:`, `data:` and other script-capable schemes are refused for
+  typed, pasted and bubble-entered links (`SAFE_LINK_PROTOCOLS`). HTML pastes
+  keep only the text of links whose `href` fails `isSafeUrl`, in the paste
+  normaliser and, via a paste-time `LinkNode` transform, on Lexical's
+  built-in paste path, so `javascript:` URLs never reach the emitted markdown
+- **Form fields.** `id`, `name`, `aria-label`, `aria-labelledby`,
+  `aria-describedby`, `aria-invalid`, `aria-required` are forwarded to the
+  editable surface (`name` renders a hidden input with the markdown); a
+  visible `:focus-visible` ring on the surface (`--ring` / `--primary`)
+  replaces the removed outline; `maxLength` rejects input past the
+  plain-text limit, `onCharacterCountChange` reports the length,
+  `showCharacterCount` / `CharacterCount` render it
+- **Controlled and uncontrolled editing.** `value` is truly controlled:
+  whenever the prop differs from the last markdown the editor emitted through
+  `onValueChange`, the document is replaced in one update (a single undo
+  step) and the caret is kept at the same position when it still exists.
+  `value=""` clears the editor. Hosts no longer need to `key`-remount the
+  editor to push content in. A remounted sync plugin (e.g. switching
+  `edit-raw` → `edit-rich`) always applies the host value, so an emptied raw
+  document comes back empty. New `defaultValue` prop for the uncontrolled
+  path; `edit-raw` without a `value` keeps its keystrokes (they were
+  discarded)
+- **Sync.** `debounceMs` delays `onValueChange` (the document is never
+  delayed); a change still pending when the editor unmounts is delivered
+  instead of dropped, so the last keystrokes before a dialog closes or a
+  route changes reach the host. Updates that dirty no leaf and mark no
+  element on purpose skip serialisation, and a serialisation identical to
+  the last emitted value is not reported. A controlled `value` equal to one
+  of the last 8 emitted values from the last second is treated as a stale
+  echo and ignored instead of stomping what has been typed since
+  (`EMITTED_HISTORY`, `EMITTED_STALE_MS`); older values are re-imported so a
+  deliberate reset still wins
+- **SSR.** `mode="view"` renders a non-editable fallback (the document's
+  block text, no `contenteditable`, no placeholder) on the server and until
+  hydration; the Lexical surface then mounts with the document already in
+  its state so the placeholder never flashes. `readOnly` renders
+  `contenteditable="false"` from the first paint
+- New `onError` prop on `MarkdownEditor` / `MarkdownEditor.Root` (default
+  `console.error`), forwarded to Lexical
+- **Round-trip escaping.** Image markdown percent-encodes whitespace and
+  parentheses in the source (on the node itself, so an uploaded
+  "my photo (1).png" stays an image) and backslash-escapes `]` in alt and
+  `"` in titles; mention markdown escapes `]` / `\` in names and
+  percent-encodes `%`, `)` and whitespace in ids. Values that used to
+  degrade to literal text now re-import
+- **Accessibility.** An `aria-invalid` surface keeps the 2px focus ring
+  when focused (the danger line sits inside it); the character counter is
+  no longer a live region read on every keystroke: a hidden status announces
+  only when the document passes `maxLength` or returns within it
+  (`labels.limitExceeded` / `labels.limitRestored`)
+- **Performance.** `DrawingNode.getData()` memoizes parsing on the payload
+  string; `normalizeDrawingData` takes an `onWarn` callback (default: one
+  console warning per session) instead of warning on every parse; the
+  toolbar keyboard hook only sweeps elements marked `data-toolbar-item`
+  (nested widgets keep their own focus handling) and measures the writing
+  direction once, not per keydown
+- **Code highlighting.** TypeScript / TSX is its own grammar (`ts`, `tsx`,
+  `mts`, `cts`; type-level keywords, primitive types, utility types and
+  type arguments); `javascript` no longer answers to those aliases. 16
+  grammars. The registry loads the built-ins on first lookup, so no module
+  has import-time side effects apart from the stylesheet and
+  `suppress-global-highlighter`, which stops the Prism instance pulled in by
+  `@lexical/code` from re-highlighting the host page's own code blocks (both
+  are listed in `sideEffects`; keep them in `sideEffects`-sensitive bundler
+  configs)
+- **Tokens.** The stylesheet no longer carries a foreign brand colour: the
+  outline marker, table selection and rail accent fall back to `--primary`
+  / `currentColor`; every radius reads `--radius-sm|md|lg|full`; the code
+  palette reads `--zui-code-<type>-light` / `-dark`, the canvas surface and
+  grid `--zui-drawing-surface-color` / `--zui-drawing-grid-color`, all with
+  the previous literals as fallbacks
+- **Plugins.** Four opt-in first-party plugins, each on its own entry
+  point and on the default entry (not on `./markdown`): `./mentions`
+  (`MentionNode`, `MENTION`, `MentionsPlugin`: typeahead listbox with
+  `aria-activedescendant`, several triggers, `[@name](mention:id)`
+  markdown), `./comments` (`CommentsPlugin` on `@lexical/mark`: controlled
+  `comments`, floating add button, `Mod+Shift+M`, caret bubble,
+  `<!-- zui:comment id -->` markers), `./images` (`ImageNode`, `IMAGE`,
+  `ImagesPlugin`, `ImageButton`: paste / drop upload with a progress
+  placeholder, `accept` / `maxSize`, alt-text editing, `![alt](src)`
+  markdown) and `./paste` (`PastePlugin`, `normalizePastedHtml`: Word,
+  Google Docs, Confluence and Outlook HTML reduced to structure)
+- Tests: the round-trip script is a `node --test` file that imports the
+  exported production transformer list; jsdom and axe-core are
+  devDependencies, so mounted tests fail instead of skipping
+- Build: dist is minified and cleaned on every build (removes the stale
+  `dist/index.css`)
+
+## 0.11.1 — 2026-08-29
+
+- Fix: mounting an editor no longer steals focus and scrolls to its first
+  code block. The initial markdown import and the one-off re-highlight of
+  existing code blocks now run with Lexical's `skip-dom-selection` tag, so
+  their selection stays internal until the user clicks in
+
+## 0.11.0 — 2026-08-27
 
 - Depends on **`@zuilib/tokens`** (optional peer) instead of `@zuilib/core`:
   the editor only ever consumed the design tokens, never a component.
@@ -10,7 +173,7 @@
 - Documented that a Tailwind host must `@source` this package for the
   document-content classes (headings, lists, code) to be generated
 
-## 0.10.1
+## 0.10.1 — 2026-08-26
 
 - **Table columns** get the same rail as rows: a strip along the table's
   top edge with a bar on the caret's column and a `+` handle after the
@@ -28,7 +191,7 @@
   `$insertTableColumnNear`, `$deleteSelectedTableColumn`,
   `insertableColumnIndices`, `canDeleteColumn`
 
-## 0.10.0
+## 0.10.0 — 2026-08-26
 
 - **Table rows.** Put the caret in a table and a **row rail** appears along
   its left edge: a bar marks the caret's row, and a `+` handle rests under
@@ -49,7 +212,7 @@
 - Rail and toolbar use the theme tokens (`--primary`, `--popover`,
   `--border`, `--shadow-medium`); motion respects `prefers-reduced-motion`
 
-## 0.9.0
+## 0.9.0 — 2026-08-26
 
 - **Ink drawing style**: `drawingStyle="ink"` on the editor renders shapes
   as one seeded, pressure-varying pen stroke with misregistered fills and
@@ -57,7 +220,7 @@
   axes) when the host loads it. Renderer-only: the drawing format is
   unchanged. Geometry helpers are exported (`inkStroke`, `seedFrom`, …)
 
-## 0.8.0
+## 0.8.0 — 2026-08-26
 
 - **Syntax highlighting** for fenced code blocks, driven by the package's
   own grammars instead of Prism: JavaScript/TypeScript, Kotlin, Java, C/C++,
@@ -72,7 +235,7 @@
 - Unknown languages get the same line structure as known ones, so cursor
   movement and indentation behave identically
 
-## 0.7.2
+## 0.7.2 — 2026-08-25
 
 - Canvas properties are one **color** setting (outline plus its matching
   fill on boxes: plain (no outline), black, gray, red, green, blue, orange,
@@ -88,7 +251,7 @@
 - The floating table settings use the theme tokens (`--popover`,
   `--border`, `--shadow-medium`) instead of fixed light/dark colors
 
-## 0.7.1
+## 0.7.1 — 2026-08-25
 
 - Fix: free `text` shapes could not be typed into. The text tool's editor
   opened on pointerdown and was blurred by the same click; it now opens on
@@ -100,7 +263,7 @@
 - Fix: keyboard shortcuts keep working after committing text (the canvas
   regains focus); `Home`/`End` work inside the inline text editor
 
-## 0.7.0
+## 0.7.0 — 2026-08-25
 
 **Themed drawing canvas.** The canvas chrome now follows the host theme
 instead of shipping its own look.
@@ -119,7 +282,7 @@ instead of shipping its own look.
 - `--zui-drawing-dark-filter` exposes the dark-mode inversion of the
   drawing area (`none` opts out)
 
-## 0.6.0
+## 0.6.0 — 2026-08-25
 
 **Text measure and `text` block width.** Additive: markdown, JSON, class
 names and props keep their meaning; with no configuration the layout is
@@ -171,7 +334,7 @@ unchanged.
 - **Adopting**: set `measure` (or the CSS variable) and delete any external
   `max-width` / `margin-inline` overrides on `.zui-text-editor-content > *`
 
-## 0.5.0
+## 0.5.0 — 2026-08-25
 
 **Diagram builder rewrite.** The drawing canvas, its payload format and the
 authoring story for LLMs were rebuilt.
@@ -219,7 +382,7 @@ authoring story for LLMs were rebuilt.
   `shapes/`, `canvas/`); shape geometry is data-driven so the router,
   bindings, skeleton expansion and exporters run without a DOM
 
-## 0.4.0
+## 0.4.0 — 2026-08-25
 
 - **Table density**, Slab-style: the floating table toolbar (caret in a
   table) gains *compact* / *comfortable* (default) / *spacious* row padding
@@ -234,7 +397,7 @@ authoring story for LLMs were rebuilt.
   `formatTableSettingsMarker`. `TABLE_WIDTH_MARKER` is deprecated in favour
   of `formatTableSettingsMarker`
 
-## 0.3.1
+## 0.3.1 — 2026-08-25
 
 - **Block width** for tables and drawings: switch any table or drawing
   between *full width* (spans the editor, the previous behaviour) and
@@ -254,7 +417,7 @@ authoring story for LLMs were rebuilt.
   - New exports: `BlockWidth`, `$getTableWidth`, `$setTableWidth`,
     `$getSelectedTable`, `TABLE_WIDTH_MARKER`
 
-## 0.3.0
+## 0.3.0 — 2026-08-23
 
 - **Custom toolbars**
   - `toolbar` prop accepts a render function receiving the default groups
@@ -270,7 +433,7 @@ authoring story for LLMs were rebuilt.
 - Internal: `LexicalComposer` is now mounted in `edit-raw` mode too, so
   hooks keep working across mode switches
 
-## 0.2.1
+## 0.2.1 — 2026-08-09
 
 - `DRAWING_FORMAT.md`: authoritative spec of the ```drawing JSON payload,
   written for programmatic/LLM consumption; ships in the npm package
@@ -279,7 +442,7 @@ authoring story for LLMs were rebuilt.
 - New exports `parseDrawingData` / `serializeDrawingData`
 - This changelog; README overhaul
 
-## 0.2.0
+## 0.2.0 — 2026-08-09
 
 - **Outline** (`outline` prop, default off): docked, collapsible
   table-of-contents sidebar — live heading list, click-to-scroll, current
@@ -288,7 +451,7 @@ authoring story for LLMs were rebuilt.
   under a heading via a gutter chevron; view-layer only (markdown
   untouched); auto-expands if the cursor enters a folded section
 
-## 0.1.0
+## 0.1.0 — 2026-08-09
 
 - **Tables**: GFM pipe tables round-trip through markdown; artifact-style
   rendering; in-place editing via Lexical `TablePlugin`; new peer deps
@@ -305,7 +468,7 @@ authoring story for LLMs were rebuilt.
   - Stroke/fill palettes; dark mode via canvas color inversion
 - Round-trip test suite (`pnpm test`)
 
-## 0.0.2 and earlier
+## 0.0.2 and earlier — 2026-04-17 to 2026-07-05
 
 - Markdown editor wrapping Lexical: `edit-md` / `edit-raw` / `view` modes,
   markdown shortcuts, checklists, fenced code highlighting, YAML

package/DRAWING_FORMAT.md

@@ -7,13 +7,13 @@ fenced code blocks containing a single JSON object. Two languages exist:
   coordinates. The editor lays it out and expands it into a full drawing on
   import. **Generators should emit this one.** See
   [Prefer the ```diagram skeleton](#prefer-the-diagram-skeleton).
-- ```` ```drawing ```` holds the **concrete format** (version 2): every shape
+- ```` ```drawing ```` holds the **concrete format** (version 3): every shape
   with its position, size and style. This is what the editor stores once a
   drawing has been edited.
 
 ````md
 ```drawing
-{"version":2,"canvasHeight":320,"shapes":[ ... ]}
+{"version":3,"canvasHeight":320,"shapes":[ ... ]}
 ```
 ````
 
@@ -26,10 +26,12 @@ from the package as `DRAWING_DATA_JSON_SCHEMA` (concrete) and
 Malformed payloads never crash the editor: anything that fails validation
 degrades to an empty canvas (invalid shapes are dropped individually).
 
-Exactly one concrete format is supported: version 2, as written by the
-editor. Payloads with any other `version` (or none) render as an empty
-canvas. Convenience spellings such as `side` exist only in the ```diagram
-skeleton, which is a separate block type.
+The editor writes version 3. Version 2 (identical except shape sizes were
+spelled `w`/`h`) is migrated on read, so persisted drawings keep loading;
+the editor re-serializes them as version 3. Payloads with any other
+`version` (or none) render as an empty canvas. Convenience spellings such
+as `side` exist only in the ```diagram skeleton, which is a separate block
+type.
 
 ## Coordinate system
 
@@ -53,7 +55,7 @@ skeleton, which is a separate block type.
 
 | Field          | Type      | Notes                                                        |
 |----------------|-----------|--------------------------------------------------------------|
-| `version`      | `2`       | Literal `2`                                                  |
+| `version`      | `3`       | Literal `3` (`2` accepted on read: shape `w`/`h` migrate to `width`/`height`) |
 | `canvasHeight` | `number`  | Canvas height in px (min 80)                                 |
 | `canvasWidth`  | `number`  | Optional logical width in px (min 120); scales to fit when set |
 | `width`        | `"full"` \| `"text"` \| `"content"` | Optional; default `"full"`. `"text"` aligns with the text column, `"content"` fits the shapes' extent |
@@ -68,7 +70,7 @@ All shapes share these required fields:
 | `id`          | `string` | Unique within the drawing; bindings reference it                   |
 | `type`        | `string` | One of the types below                                             |
 | `x`, `y`      | `number` | Boxes/text: top-left of the bounding box. Connectors: start point. |
-| `w`, `h`      | `number` | Boxes/text: size (non-negative). Connectors: delta to the end point (`end = (x+w, y+h)`; may be negative). |
+| `width`, `height` | `number` | Boxes/text: size (non-negative). Connectors: delta to the end point (`end = (x+width, y+height)`; may be negative). |
 | `stroke`      | `string` | CSS color of the outline and of all text on the shape              |
 | `fill`        | `string` | CSS color of the interior; `"transparent"` for none                |
 | `strokeWidth` | `number` | Use `2`                                                            |
@@ -109,14 +111,14 @@ floating `text` shapes; slot text is attached to the card.
 
 ### `text`: free-floating annotation
 
-`text` holds the content. `w`/`h` are advisory (the editor recomputes them
+`text` holds the content. `width`/`height` are advisory (the editor recomputes them
 from the content); position is the top-left of the first line. Use only for
 annotations that belong to no box (the editor deletes a text shape when its
 content is emptied).
 
 ### Connectors (`arrow`, `line`)
 
-Geometry: from `(x, y)` to `(x+w, y+h)`. `arrow` has a head at the end;
+Geometry: from `(x, y)` to `(x+width, y+height)`. `arrow` has a head at the end;
 `line` has none.
 
 | Field           | Type       | Meaning                                                                 |
@@ -156,7 +158,7 @@ the box moves:
   (useful for lines that end inside a shape).
 
 Bound endpoints are re-anchored by the editor, so the connector's own
-`x`/`y`/`w`/`h` only need to be approximately right: place them near the
+`x`/`y`/`width`/`height` only need to be approximately right: place them near the
 intended boxes and the resolver snaps them. Don't bind both ends of one
 connector to the same box.
 
@@ -266,7 +268,7 @@ A decision with attach sides and elbow routing, flowing down:
 ````
 
 Programmatic use: `parseDrawingSkeleton(json)` parses a skeleton,
-`expandSkeleton(skeleton)` returns `DrawingData`, and
+`expandDrawingSkeleton(skeleton)` returns `DrawingData`, and
 `DRAWING_SKELETON_JSON_SCHEMA` is the JSON Schema. Types: `DrawingSkeleton`,
 `SkeletonBox`, `SkeletonConnector`.
 
@@ -276,10 +278,10 @@ Two bound cards with a labeled arrow:
 
 ````md
 ```drawing
-{"version":2,"canvasHeight":260,"shapes":[
-  {"id":"web","type":"rect","x":40,"y":70,"w":170,"h":100,"stroke":"#1971c2","fill":"#a5d8ff","strokeWidth":2,"label":"CLIENT","text":"Web App","footer":"React"},
-  {"id":"api","type":"rect","x":330,"y":70,"w":170,"h":100,"stroke":"#2f9e44","fill":"#b2f2bb","strokeWidth":2,"label":"SERVICE","text":"API","footer":"Kotlin"},
-  {"id":"e1","type":"arrow","x":216,"y":120,"w":108,"h":0,"stroke":"#1e1e1e","fill":"transparent","strokeWidth":2,"startBinding":{"id":"web"},"endBinding":{"id":"api"},"text":"REST"}
+{"version":3,"canvasHeight":260,"shapes":[
+  {"id":"web","type":"rect","x":40,"y":70,"width":170,"height":100,"stroke":"#1971c2","fill":"#a5d8ff","strokeWidth":2,"label":"CLIENT","text":"Web App","footer":"React"},
+  {"id":"api","type":"rect","x":330,"y":70,"width":170,"height":100,"stroke":"#2f9e44","fill":"#b2f2bb","strokeWidth":2,"label":"SERVICE","text":"API","footer":"Kotlin"},
+  {"id":"e1","type":"arrow","x":216,"y":120,"width":108,"height":0,"stroke":"#1e1e1e","fill":"transparent","strokeWidth":2,"startBinding":{"id":"web"},"endBinding":{"id":"api"},"text":"REST"}
 ]}
 ```
 ````
@@ -289,11 +291,11 @@ line:
 
 ````md
 ```drawing
-{"version":2,"canvasHeight":300,"canvasWidth":640,"shapes":[
-  {"id":"a","type":"rect","x":40,"y":40,"w":150,"h":80,"stroke":"#1e1e1e","fill":"transparent","strokeWidth":2,"text":"A"},
-  {"id":"b","type":"cylinder","x":420,"y":180,"w":140,"h":110,"stroke":"#7048e8","fill":"#d0bfff","strokeWidth":2,"text":"B"},
-  {"id":"e1","type":"arrow","x":190,"y":80,"w":300,"h":100,"stroke":"#1e1e1e","fill":"transparent","strokeWidth":2,"startBinding":{"id":"a","fixedPoint":[1,0.5]},"endBinding":{"id":"b","fixedPoint":[0.5,0]},"routing":"elbow"},
-  {"id":"e2","type":"line","x":115,"y":126,"w":375,"h":54,"stroke":"#1971c2","fill":"transparent","strokeWidth":2,"startBinding":{"id":"a"},"endBinding":{"id":"b"},"waypoints":[{"x":115,"y":260},{"x":490,"y":260}]}
+{"version":3,"canvasHeight":300,"canvasWidth":640,"shapes":[
+  {"id":"a","type":"rect","x":40,"y":40,"width":150,"height":80,"stroke":"#1e1e1e","fill":"transparent","strokeWidth":2,"text":"A"},
+  {"id":"b","type":"cylinder","x":420,"y":180,"width":140,"height":110,"stroke":"#7048e8","fill":"#d0bfff","strokeWidth":2,"text":"B"},
+  {"id":"e1","type":"arrow","x":190,"y":80,"width":300,"height":100,"stroke":"#1e1e1e","fill":"transparent","strokeWidth":2,"startBinding":{"id":"a","fixedPoint":[1,0.5]},"endBinding":{"id":"b","fixedPoint":[0.5,0]},"routing":"elbow"},
+  {"id":"e2","type":"line","x":115,"y":126,"width":375,"height":54,"stroke":"#1971c2","fill":"transparent","strokeWidth":2,"startBinding":{"id":"a"},"endBinding":{"id":"b"},"waypoints":[{"x":115,"y":260},{"x":490,"y":260}]}
 ]}
 ```
 ````