@phuong-tran-redoc/document-engine-angular 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phuong-tran-redoc/document-engine-angular",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "type": "module",
   "license": "MIT",
   "author": "Realestatedoc (Redoc)",
@@ -35,7 +35,7 @@
   "dependencies": {
     "tslib": "^2.3.0",
     "@floating-ui/dom": "^1.7.4",
-    "@phuong-tran-redoc/document-engine-core": "0.1.1"
+    "@phuong-tran-redoc/document-engine-core": "0.1.3"
   },
   "peerDependencies": {
     "rxjs": "^7.5.0",
@@ -75,6 +75,12 @@
     "./styles": {
       "sass": "./src/lib/styles/index.scss"
     },
+    "./styles/editor-content": {
+      "sass": "./src/lib/styles/editor-content.scss"
+    },
+    "./styles/editor-interaction": {
+      "sass": "./src/lib/styles/editor-interaction.scss"
+    },
     "./package.json": {
       "default": "./package.json"
     },

package/src/lib/styles/editor-content.scss

@@ -0,0 +1,190 @@
+/**
+ * Opt-in editor CONTENT prose theme
+ * `@phuong-tran-redoc/document-engine-angular/styles/editor-content`
+ *
+ * Structural correctness for the editor's *rendered content*: heading scale,
+ * bullet + ordered lists (incl. the engine's `data-list-style-type` counters),
+ * blockquote, inline code, hr, img, and block rhythm.
+ *
+ * NOT auto-imposed — the main `/styles` barrel is chrome-only, so a consumer
+ * opts in by importing THIS subpath explicitly. Token-driven: every colour /
+ * dimension resolves from a CSS custom property with a sensible fallback, so a
+ * consumer themes it purely by remapping vars (no rule-body overrides needed).
+ *
+ * Scoped to `.tiptap-editor` (the class the editor directive sets on its host),
+ * so importing it can never leak prose onto unrelated app content.
+ */
+
+.tiptap-editor {
+  /* --- Block rhythm --- */
+  p {
+    margin: 0.5rem 0;
+  }
+
+  p:first-of-type {
+    margin-top: 0;
+  }
+
+  p:last-of-type {
+    margin-bottom: 0;
+  }
+
+  /* --- Headings (structural floor) ---
+   * The engine emits class-less <h1>–<h6> and the host preflight strips their
+   * size, so the lib restores a token-overridable scale. Remap `--de-prose-h*`
+   * (size) and `--foreground` (colour) to theme. */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: 600; // font-semibold
+    line-height: 1.25;
+    margin: 1.25rem 0 0.5rem;
+    color: var(--foreground, hsl(222.2 84% 4.9%));
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  h1 {
+    font-size: var(--de-prose-h1, 2rem);
+  }
+
+  h2 {
+    font-size: var(--de-prose-h2, 1.5rem);
+  }
+
+  h3 {
+    font-size: var(--de-prose-h3, 1.25rem);
+  }
+
+  h4 {
+    font-size: var(--de-prose-h4, 1.125rem);
+  }
+
+  h5 {
+    font-size: var(--de-prose-h5, 1rem);
+  }
+
+  h6 {
+    font-size: var(--de-prose-h6, 0.875rem);
+  }
+
+  /* --- Blockquote --- (ported from `@apply border-l-4 border-border pl-4`) */
+  blockquote {
+    border-left: 4px solid var(--border, hsl(214.3 31.8% 91.4%));
+    padding-left: 1rem; // pl-4
+  }
+
+  /* --- Horizontal rule --- (ported from `@apply border-t border-foreground`) */
+  hr {
+    border: 0;
+    border-top: 1px solid var(--foreground, hsl(222.2 84% 4.9%));
+  }
+
+  /* --- Inline code --- */
+  code {
+    background-color: var(--secondary, hsl(210 40% 96.1%));
+    color: var(--secondary-foreground, hsl(222.2 47.4% 11.2%));
+    border-radius: 0.4rem;
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  /* --- Image --- */
+  img {
+    display: block;
+    height: auto;
+    width: 100%;
+    max-width: 100%;
+    margin: 1rem 0;
+  }
+
+  /* --- Bullet lists (structural floor) ---
+   * The host preflight kills `list-style`; the engine relies on the theme to
+   * restore markers. */
+  ul {
+    list-style: disc;
+    padding-left: 1.5rem;
+    margin: 0.5rem 0;
+  }
+
+  ul ul {
+    list-style: circle;
+  }
+
+  ul ul ul {
+    list-style: square;
+  }
+
+  ul li p {
+    margin: 0;
+  }
+
+  /* --- Ordered lists: engine-coupled counters ---
+   * The engine resets `list-style` and paints markers via CSS counters keyed off
+   * the `data-list-style-type` attribute (decimal / lower-alpha-dot /
+   * lower-alpha-parens / lower-roman-parens). A consumer cannot derive this —
+   * the lib owns it. */
+  ol[data-list-style-type] {
+    counter-reset: list-counter;
+    list-style: none;
+    padding-left: 3rem;
+    margin: 0.5rem 0;
+  }
+
+  ol[data-list-style-type] > li {
+    position: relative;
+    display: block;
+
+    &:not(:first-child) {
+      margin-top: 0.25rem;
+    }
+  }
+
+  ol[data-list-style-type] > li::before {
+    position: absolute;
+    left: -2rem;
+    width: 2rem;
+    display: inline-block;
+    text-align: left;
+    font-variant-numeric: tabular-nums;
+    font-weight: normal;
+  }
+
+  ol p {
+    margin: 0;
+  }
+
+  /* Default decimal style (1., 2., 3.) */
+  ol[data-list-style-type='decimal'] > li::before {
+    counter-increment: list-counter;
+    content: counter(list-counter) '.';
+  }
+
+  /* Lower alpha with dot style (a., b., c.) */
+  ol[data-list-style-type='lower-alpha-dot'] > li::before {
+    counter-increment: list-counter;
+    content: counter(list-counter, lower-alpha) '.';
+  }
+
+  /* Lower alpha with parentheses style ((a), (b), (c)) */
+  ol[data-list-style-type='lower-alpha-parens'] > li::before {
+    counter-increment: list-counter;
+    content: '(' counter(list-counter, lower-alpha) ')';
+  }
+
+  /* Lower roman with parentheses style ((i), (ii), (iii)) */
+  ol[data-list-style-type='lower-roman-parens'] > li::before {
+    counter-increment: list-counter;
+    content: '(' counter(list-counter, lower-roman) ')';
+  }
+
+  /* Nested list support */
+  ol[data-list-style-type] ol {
+    counter-reset: list-counter;
+  }
+}

package/src/lib/styles/editor-interaction.scss

@@ -0,0 +1,281 @@
+/**
+ * Opt-in editor INTERACTION chrome theme
+ * `@phuong-tran-redoc/document-engine-angular/styles/editor-interaction`
+ *
+ * Editing-surface chrome for a consumer mounting a bare editor: node-view widget
+ * handles + type-around buttons, table editing (selected cell, column resize),
+ * dynamic-field nodes, restricted-editing regions, empty-state placeholders, and
+ * the selected-node outline.
+ *
+ * Separate from `editor-content` on purpose: content prose is what makes the
+ * document *render* correctly, this is what makes it *editable*. NOT auto-imposed
+ * (the main `/styles` barrel is chrome-only) — import this subpath explicitly.
+ * Token-driven with sensible fallbacks; scoped to `.tiptap-editor`.
+ *
+ * Ported from the demo app's private `_editor.scss`; Tailwind `@apply` utilities
+ * are inlined as plain CSS and the demo-only colour vars are remapped so the
+ * theme themes cleanly for any consumer:
+ *   --light-blue / --light-blue-foreground  → --accent / --accent-foreground
+ *   --blue (hover, borders, handles)         → --ring
+ *   --blue (selected-node outline)           → --primary
+ *   --secondary (placeholder text)           → --muted-foreground
+ *   --green (dynamic-field accent)           → --de-dynamic-field (engine custom prop)
+ */
+
+.tiptap-editor {
+  position: relative;
+
+  .ProseMirror {
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  /* Selected node (covers image + any selected block) */
+  .ProseMirror-selectednode {
+    outline: 3px solid var(--primary, hsl(221.2 83.2% 53.3%));
+  }
+
+  /* Restricted-editing region (was --light-blue / --blue) */
+  .editable-region {
+    background-color: var(--accent, hsl(210 40% 96.1%));
+    color: var(--accent-foreground, hsl(222.2 47.4% 11.2%));
+    border-bottom: 1px dashed var(--ring, hsl(221.2 83.2% 53.3%));
+    padding: 0 4px;
+  }
+
+  /* Placeholder (first line) — was --secondary; use --muted-foreground so the
+   * placeholder stays legible for any consumer token set */
+  p.is-editor-empty:first-child::before {
+    color: var(--muted-foreground, hsl(215.4 16.3% 46.9%));
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    pointer-events: none;
+  }
+
+  /* Placeholder (every empty line) */
+  .is-empty::before {
+    color: var(--muted-foreground, hsl(215.4 16.3% 46.9%));
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    pointer-events: none;
+  }
+
+  /* --- Node-view widget (figure wrapper) --- */
+  .widget {
+    position: relative; // relative
+    margin: 1rem 0; // my-4 mx-0
+    transition: opacity 0.2s ease-in-out;
+
+    &:hover {
+      outline: 3px solid var(--ring, hsl(221.2 83.2% 53.3%));
+    }
+
+    &.ProseMirror-selectednode {
+      outline: 2px solid var(--accent, hsl(210 40% 96.1%));
+      outline-offset: 2px;
+    }
+
+    &:hover .widget__selection-handle {
+      opacity: 1;
+    }
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    .ck p:first-child {
+      margin-top: 0;
+    }
+  }
+
+  /* Selection handle button */
+  .widget__selection-handle {
+    position: absolute;
+    z-index: 20;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: grab;
+    width: 1.5rem; // w-6
+    height: 1.5rem; // h-6
+    border-radius: 0.25rem; // rounded
+    border: 1px solid var(--border, hsl(214.3 31.8% 91.4%));
+    background-color: var(--card, hsl(0 0% 100%));
+    color: var(--muted-foreground, hsl(215.4 16.3% 46.9%));
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); // shadow-elevation-1
+
+    left: -32px;
+    top: 0;
+    opacity: 0;
+    transition: opacity 0.15s ease-in-out, background-color 0.15s ease-in-out;
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+
+    &:hover {
+      opacity: 1 !important;
+      background-color: var(--accent, hsl(210 40% 96.1%));
+      color: var(--accent-foreground, hsl(222.2 47.4% 11.2%));
+    }
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+
+  /* Widget content area */
+  .widget-content {
+    position: relative;
+  }
+
+  /* Type-around buttons (insert paragraph before/after) */
+  .type-around {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s ease-in-out;
+    height: auto;
+    width: auto;
+    position: static;
+  }
+
+  .widget:hover > .type-around {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .widget__type-around__button {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    width: 1.5rem; // w-6
+    height: 1.5rem; // h-6
+    border-radius: 9999px; // rounded-full
+    background-color: var(--card, hsl(0 0% 100%));
+    color: var(--muted-foreground, hsl(215.4 16.3% 46.9%));
+    border: 2px solid var(--border, hsl(214.3 31.8% 91.4%));
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); // shadow-elevation-2
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    z-index: 20;
+
+    &:hover {
+      background-color: var(--accent, hsl(210 40% 96.1%));
+      color: var(--accent-foreground, hsl(222.2 47.4% 11.2%));
+      border-color: var(--accent, hsl(210 40% 96.1%));
+    }
+
+    &:active {
+      transform: scale(1.05);
+    }
+
+    &_before {
+      position: absolute;
+      top: -0.75rem;
+      left: 10%;
+      transform: translateX(-50%);
+    }
+
+    &_after {
+      position: absolute;
+      bottom: -0.75rem;
+      left: 90%;
+      transform: translateX(-50%);
+    }
+
+    svg {
+      width: 14px;
+      height: 14px;
+      transition: transform 0.2s ease;
+    }
+
+    &:hover svg {
+      transform: scale(1.1);
+    }
+  }
+
+  /* --- Table editing chrome --- */
+  .table-wrapper {
+    position: relative;
+  }
+
+  table {
+    width: 100%;
+    max-width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+    position: relative;
+
+    th,
+    td {
+      padding: 6px;
+      position: relative;
+    }
+
+    /* Selected cell (Tiptap/ProseMirror .selectedCell) */
+    .selectedCell {
+      position: relative;
+
+      &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        background-color: var(--de-selected-cell, rgba(59, 130, 246, 0.12)); // bg-blue-100/50
+        pointer-events: none;
+      }
+    }
+
+    /* Column resize handle (ColumnResizing) */
+    .column-resize-handle {
+      position: absolute;
+      width: 0.25rem; // w-1
+      top: 0;
+      bottom: 0;
+      right: -0.125rem; // -right-0.5
+      background-color: var(--ring, hsl(221.2 83.2% 53.3%)); // bg-blue-300
+      pointer-events: none;
+    }
+  }
+
+  .resize-cursor {
+    cursor: col-resize;
+  }
+
+  /* Custom column-resizer handle */
+  .pm-col-resizer {
+    position: absolute;
+    top: 0;
+    z-index: 10; /* above table content */
+    display: block;
+    width: 4px;
+    background-color: var(--ring, hsl(221.2 83.2% 53.3%));
+    opacity: 0; /* hidden by default */
+    transition: opacity 0.2s;
+    cursor: col-resize;
+    height: 100%;
+
+    &:hover {
+      opacity: 1 !important;
+    }
+  }
+
+  /* --- Dynamic field node --- (accent was demo-only --green; exposed as the
+   * engine custom prop --de-dynamic-field so it stays remappable, since a shadcn
+   * consumer never defines --green) */
+  .dynamic-field {
+    border: 1px solid var(--de-dynamic-field, hsl(142.1 76.2% 36.3%));
+    cursor: default; /* feels non-editable */
+    user-select: none; /* prevent text selection inside */
+    white-space: nowrap;
+
+    &.ProseMirror-selectednode {
+      outline: 1px solid var(--ring, hsl(221.2 83.2% 53.3%));
+    }
+  }
+}

package/src/lib/styles/index.scss

@@ -1,22 +1,28 @@
 /**
- * Main styles entry point for @document-engine/document-engine-angular
+ * Main styles entry point for @phuong-tran-redoc/document-engine-angular
  *
- * Usage in client application:
+ * This barrel ships CHROME ONLY — toolbar, buttons, select, color-picker,
+ * the document-editor wrapper, inputs, etc. It never styles the editor's
+ * rendered content, so importing it can never impose a look on your document.
  *
- * Option 1: Import default styles (recommended)
- * In your main styles.scss or styles.css:
- * @import '@document-engine/document-engine-angular/styles';
+ * Usage in a client application:
  *
- * Option 2: Import individual style files
- * @import '@document-engine/document-engine-angular/styles/button';
- * @import '@document-engine/document-engine-angular/styles/icon';
- * @import '@document-engine/document-engine-angular/styles/toolbar';
- * @import '@document-engine/document-engine-angular/styles/document-editor';
- * @import '@document-engine/document-engine-angular/styles/color-picker';
+ *   // Chrome (recommended baseline)
+ *   @use '@phuong-tran-redoc/document-engine-angular/styles';
  *
- * Option 3: Provide custom styles
- * Styles use class and element selectors (document-engine-*, .document-engine-*),
- * so you can override them with your own CSS without importing these files.
+ * Opt-in content / interaction themes (NOT included in this barrel — import
+ * whichever you want, then theme by remapping their CSS custom properties):
+ *
+ *   // Content prose: heading scale, lists (incl. data-list-style-type counters),
+ *   // blockquote, code, hr, img, block rhythm
+ *   @use '@phuong-tran-redoc/document-engine-angular/styles/editor-content';
+ *
+ *   // Editing-surface chrome: node-view widget handles, table editing,
+ *   // dynamic fields, placeholders, selected-node outline
+ *   @use '@phuong-tran-redoc/document-engine-angular/styles/editor-interaction';
+ *
+ * All styles use class/element selectors and CSS-variable-driven values, so you
+ * can also override them with your own CSS without importing these files.
  */
 
 @forward 'icon';

package/src/lib/styles/toolbar.scss

@@ -56,3 +56,18 @@
     display: none;
   }
 }
+
+// Active/pressed state for toolbar toggle buttons (bold, italic, underline, lists,
+// link, blockquote, …). The buttons apply `.active` via
+// `[class.active]="editor.isActive(...)"`; this gives the pressed treatment so the
+// currently-applied formatting is visible. Without it the class is set but nothing
+// renders — the toggle never "lights up". Uses the consumer's `--primary` tokens
+// for contrast against the toolbar surface (`--muted`); the hover selector keeps an
+// active button highlighted while the pointer is over it.
+document-engine-toolbar .btn.active {
+  &,
+  &:hover:not(:disabled) {
+    background-color: var(--primary, hsl(222.2 47.4% 11.2%));
+    color: var(--primary-foreground, hsl(210 40% 98%));
+  }
+}