@rtif-sdk/web 1.4.0 → 1.5.0

package/dist/types.d.ts

@@ -42,6 +42,12 @@ export interface WebEditorConfig {
      * Default: false.
      */
     readonly autoFocus?: boolean;
+    /**
+     * Enable the block gutter toolbar (hover-revealed + button and drag handle).
+     * Set to `false` to disable the gutter entirely.
+     * Default: `true`.
+     */
+    readonly gutter?: boolean;
     /**
      * Auto-create a link popover for Cmd+K and click-to-edit.
      * Requires the link plugin on the engine (included in all presets except PRESET_PLAINTEXT).

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rtif-sdk/web",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "RTIF web platform implementation (contenteditable)",
   "author": "coryrobinson42@gmail.com",
   "type": "module",
@@ -10,12 +10,16 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
-    }
+    },
+    "./styles/*": "./styles/*"
   },
   "files": [
-    "dist"
+    "dist",
+    "styles"
+  ],
+  "sideEffects": [
+    "./styles/*.css"
   ],
-  "sideEffects": false,
   "engines": {
     "node": ">=20.0.0"
   },

package/styles/all.css

@@ -0,0 +1,20 @@
+/* --------------------------------------------------------
+ * RTIF — All Styles
+ *
+ * Import this file to include all RTIF component styles.
+ * For selective loading, import individual files instead.
+ *
+ * Usage:
+ *   import '@rtif-sdk/web/styles/all.css';
+ * -------------------------------------------------------- */
+
+@import './base.css';
+@import './marks.css';
+@import './blocks.css';
+@import './toolbar.css';
+@import './floating-toolbar.css';
+@import './link-popover.css';
+@import './block-gutter.css';
+@import './drop-indicator.css';
+@import './pickers.css';
+@import './mention.css';

package/styles/base.css

@@ -0,0 +1,33 @@
+/* --------------------------------------------------------
+ * RTIF Base Styles
+ *
+ * CSS custom properties for theming, scoped to .rtif-editor.
+ * Uses :where() for 0 specificity — easy to override.
+ * -------------------------------------------------------- */
+
+:where(.rtif-editor) {
+  --rtif-accent-color: #2563eb;
+  --rtif-surface: #fff;
+  --rtif-border: #ccc;
+  --rtif-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  --rtif-radius: 6px;
+  --rtif-radius-sm: 4px;
+  --rtif-ui-font: system-ui, -apple-system, sans-serif;
+  --rtif-ui-font-size: 14px;
+  --rtif-z-gutter: 5;
+  --rtif-z-drop-line: 10;
+  --rtif-z-drop-overlay: 20;
+  --rtif-z-popover: 9999;
+}
+
+/* Utility: hide elements via class toggle instead of inline display */
+.rtif-hidden {
+  display: none !important;
+}
+
+/* Placeholder text for empty editor */
+[data-empty]::before {
+  content: attr(data-placeholder);
+  color: #aaa;
+  pointer-events: none;
+}

package/styles/block-gutter.css

@@ -0,0 +1,76 @@
+/* --------------------------------------------------------
+ * RTIF Block Gutter & Drag Handle Styles
+ *
+ * Notion-style hover toolbar to the left of blocks.
+ * Position (top, height) set by JS. Left offset defined
+ * here as a CSS property for easy override.
+ * -------------------------------------------------------- */
+
+.rtif-block-gutter {
+  position: absolute;
+  left: -48px;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  z-index: var(--rtif-z-gutter, 5);
+  user-select: none;
+}
+
+.rtif-gutter-add {
+  width: 20px;
+  height: 20px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: var(--rtif-radius-sm, 4px);
+  font-size: 16px;
+  line-height: 1;
+  color: currentColor;
+  opacity: 0.4;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.rtif-gutter-add:hover {
+  opacity: 0.7;
+  background: rgba(0, 0, 0, 0.04);
+}
+
+/* Drag handle — shared visual styles for gutter and standalone contexts */
+.rtif-drag-handle {
+  width: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: grab;
+  opacity: 0.4;
+  user-select: none;
+  font-size: 14px;
+  line-height: 1;
+  color: currentColor;
+  border: none;
+  background: transparent;
+  padding: 0;
+}
+
+/* Standalone drag handle (outside gutter) — positioned absolutely */
+.rtif-drag-handle:not(.rtif-block-gutter .rtif-drag-handle) {
+  position: absolute;
+  z-index: var(--rtif-z-gutter, 5);
+}
+
+/* Drag handle inside gutter — inherits gutter's positioning, add height */
+.rtif-block-gutter .rtif-drag-handle {
+  height: 20px;
+}
+
+.rtif-drag-handle:hover {
+  opacity: 0.7;
+}
+
+/* Block being dragged */
+.rtif-block-dragging {
+  opacity: 0.5;
+}

package/styles/blocks.css

@@ -0,0 +1,199 @@
+/* --------------------------------------------------------
+ * RTIF Block Type Styles
+ *
+ * Classes applied by block renderers in block-renderer.ts.
+ * Block attrs (align, indent) use inline styles for dynamic
+ * values — not covered here.
+ * -------------------------------------------------------- */
+
+/* ---- Headings ---- */
+.rtif-heading {
+  font-weight: 700;
+  line-height: 1.3;
+  margin-top: 0.5em;
+}
+
+.rtif-h1 { font-size: 1.75em; }
+.rtif-h2 { font-size: 1.375em; }
+.rtif-h3 { font-size: 1.125em; }
+.rtif-h4 { font-size: 1em; }
+.rtif-h5 { font-size: 0.875em; }
+.rtif-h6 { font-size: 0.75em; }
+
+/* ---- Lists ---- */
+[data-block-type="list-item"] {
+  padding-left: 1.5em;
+  position: relative;
+}
+
+[data-block-type="list-item"][data-list-style="bullet"]::before {
+  content: '\2022'; /* bullet */
+  position: absolute;
+  left: 0.25em;
+  color: #888;
+}
+
+[data-block-type="list-item"][data-list-style="ordered"] {
+  counter-increment: rtif-list;
+}
+
+[data-block-type="list-item"][data-list-style="ordered"]::before {
+  content: counter(rtif-list) '.';
+  position: absolute;
+  left: 0;
+  color: #888;
+  font-size: 0.875em;
+}
+
+/* Reset counter when a non-list block appears */
+[data-block-type="text"],
+.rtif-heading,
+.rtif-blockquote,
+.rtif-code-block {
+  counter-reset: rtif-list;
+}
+
+/* Nested list indentation */
+[data-list-depth="1"] { padding-left: 3em; }
+[data-list-depth="2"] { padding-left: 4.5em; }
+[data-list-depth="3"] { padding-left: 6em; }
+[data-list-depth="4"] { padding-left: 7.5em; }
+[data-list-depth="5"] { padding-left: 9em; }
+
+/* ---- Blockquote ---- */
+.rtif-blockquote {
+  border-left: 3px solid #d0d0d0;
+  padding-left: 1em;
+  color: #555;
+  font-style: italic;
+}
+
+/* ---- Code block ---- */
+.rtif-code-block {
+  font-family: 'SF Mono', Menlo, Consolas, monospace;
+  font-size: 0.875rem;
+  background: #1e1e2e;
+  color: #cdd6f4;
+  padding: 1em 1.25em;
+  border-radius: 6px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+}
+
+/* ---- Horizontal rule ---- */
+[data-block-type="hr"] {
+  border: none;
+  border-top: 1px solid #ddd;
+  margin: 0.75em 0;
+  min-height: 1px;
+}
+
+/* ---- Callout ---- */
+.rtif-callout {
+  padding: 0.75em 1em;
+  border-radius: 6px;
+  border-left: 4px solid;
+  margin: 0.5em 0;
+}
+
+.rtif-callout[data-variant="info"]    { background: #e8f4fd; border-color: #3b82f6; }
+.rtif-callout[data-variant="warning"] { background: #fef3cd; border-color: #f59e0b; }
+.rtif-callout[data-variant="error"]   { background: #fee2e2; border-color: #ef4444; }
+.rtif-callout[data-variant="success"] { background: #d1fae5; border-color: #10b981; }
+.rtif-callout[data-variant="note"]    { background: #f3f4f6; border-color: #6b7280; }
+
+.rtif-callout-icon {
+  margin-right: 0.5em;
+}
+
+/* ---- Image block ---- */
+[data-block-type="image"] {
+  text-align: center;
+  padding: 0.5em 0;
+  margin: 0.5em 0;
+}
+
+[data-block-type="image"] img {
+  max-width: 100%;
+  max-height: 500px;
+  border-radius: 6px;
+  object-fit: contain;
+}
+
+/* Upload in progress (data URL src) */
+[data-block-type="image"] img[src^="data:"] {
+  opacity: 0.7;
+  outline: 2px dashed #3b82f6;
+  outline-offset: 4px;
+}
+
+/* ---- Embed block ---- */
+[data-block-type="embed"] {
+  margin: 0.5em 0;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+/* Video embeds (YouTube, Vimeo) — 16:9 responsive */
+.rtif-embed-video {
+  position: relative;
+  padding-bottom: 56.25%;
+  height: 0;
+  overflow: hidden;
+  background: #000;
+  border-radius: 6px;
+}
+
+.rtif-embed-video .rtif-embed-iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+/* Twitter/X embeds */
+.rtif-embed-tweet {
+  padding: 1em;
+  background: #f9fafb;
+  border: 1px solid #e0e0e0;
+  border-radius: 6px;
+}
+
+.rtif-embed-tweet-quote {
+  margin: 0;
+  padding: 0.75em 1em;
+  border-left: 3px solid #1da1f2;
+  font-size: 0.9375rem;
+  color: #333;
+}
+
+.rtif-embed-tweet-quote a {
+  color: #1da1f2;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.rtif-embed-tweet-quote a:hover {
+  text-decoration: underline;
+}
+
+/* Generic embeds */
+.rtif-embed-generic {
+  padding: 1em;
+  background: #f9fafb;
+  border: 1px solid #e0e0e0;
+  border-radius: 6px;
+  text-align: center;
+}
+
+.rtif-embed-link {
+  color: #1a73e8;
+  text-decoration: none;
+  font-size: 0.875rem;
+}
+
+.rtif-embed-link:hover {
+  text-decoration: underline;
+}

package/styles/drop-indicator.css

@@ -0,0 +1,37 @@
+/* --------------------------------------------------------
+ * RTIF Drop Indicator Styles
+ *
+ * Visual feedback for drag-and-drop. Line position (top)
+ * set by JS. All visual properties are CSS-driven.
+ * -------------------------------------------------------- */
+
+.rtif-drop-indicator {
+  position: absolute;
+  height: 2px;
+  left: 0;
+  right: 0;
+  background-color: var(--rtif-accent-color, #2563eb);
+  pointer-events: none;
+  z-index: var(--rtif-z-drop-line, 10);
+}
+
+.rtif-drop-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: var(--rtif-z-drop-overlay, 20);
+  pointer-events: none;
+  border: 2px dashed var(--rtif-accent-color, #2563eb);
+  border-radius: var(--rtif-radius-sm, 4px);
+  background-color: rgba(37, 99, 235, 0.05);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.rtif-drop-overlay-label {
+  color: var(--rtif-accent-color, #2563eb);
+  font-size: var(--rtif-ui-font-size, 14px);
+  font-weight: 500;
+  pointer-events: none;
+  user-select: none;
+}

package/styles/floating-toolbar.css

@@ -0,0 +1,51 @@
+/* --------------------------------------------------------
+ * RTIF Floating Toolbar Styles
+ *
+ * Appears near text selection. Positioned via JS (top/left).
+ * Structural properties (position, z-index) defined here.
+ * -------------------------------------------------------- */
+
+.rtif-floating-toolbar {
+  position: fixed;
+  z-index: var(--rtif-z-popover, 9999);
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px;
+  background: var(--rtif-surface, #fff);
+  border: 1px solid var(--rtif-border, #d0d0d0);
+  border-radius: var(--rtif-radius, 6px);
+  box-shadow: var(--rtif-shadow, 0 2px 8px rgba(0, 0, 0, 0.15));
+}
+
+.rtif-floating-toolbar-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  height: 28px;
+  padding: 0 4px;
+  border: none;
+  border-radius: var(--rtif-radius-sm, 4px);
+  background: transparent;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #444;
+  cursor: pointer;
+  transition: background 0.1s;
+}
+
+.rtif-floating-toolbar-button:hover {
+  background: #e8e8e8;
+}
+
+.rtif-floating-toolbar-button[aria-pressed="true"],
+.rtif-floating-toolbar-button.rtif-floating-toolbar-active {
+  background: #d0e0ff;
+  color: #1a5ccc;
+}
+
+.rtif-floating-toolbar-button[aria-disabled="true"] {
+  opacity: 0.3;
+  cursor: not-allowed;
+}

package/styles/link-popover.css

@@ -0,0 +1,64 @@
+/* --------------------------------------------------------
+ * RTIF Link Popover Styles
+ *
+ * Floating dialog for creating/editing links. Positioned
+ * via JS (top/left). All visual properties are CSS-driven.
+ * -------------------------------------------------------- */
+
+.rtif-link-popover {
+  position: fixed;
+  z-index: var(--rtif-z-popover, 9999);
+  background-color: var(--rtif-surface, #fff);
+  border: 1px solid var(--rtif-border, #ccc);
+  border-radius: var(--rtif-radius, 6px);
+  padding: 8px;
+  box-shadow: var(--rtif-shadow, 0 2px 8px rgba(0, 0, 0, 0.15));
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--rtif-ui-font, system-ui, -apple-system, sans-serif);
+  font-size: var(--rtif-ui-font-size, 14px);
+}
+
+.rtif-link-popover-input {
+  flex: 1;
+  min-width: 200px;
+  padding: 4px 8px;
+  border: 1px solid var(--rtif-border, #ccc);
+  border-radius: var(--rtif-radius-sm, 4px);
+  font-size: var(--rtif-ui-font-size, 14px);
+  outline: none;
+}
+
+.rtif-link-popover-input:focus {
+  border-color: var(--rtif-accent-color, #0066cc);
+  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2);
+}
+
+.rtif-link-popover-apply {
+  padding: 4px 12px;
+  border: none;
+  border-radius: var(--rtif-radius-sm, 4px);
+  background-color: var(--rtif-accent-color, #0066cc);
+  color: #fff;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.rtif-link-popover-apply:hover {
+  filter: brightness(0.85);
+}
+
+.rtif-link-popover-remove {
+  padding: 4px 12px;
+  border: 1px solid #cc0000;
+  border-radius: var(--rtif-radius-sm, 4px);
+  background-color: transparent;
+  color: #cc0000;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.rtif-link-popover-remove:hover {
+  background-color: rgba(204, 0, 0, 0.08);
+}

package/styles/marks.css

@@ -0,0 +1,27 @@
+/* --------------------------------------------------------
+ * RTIF Inline Mark Styles
+ *
+ * Classes applied by mark renderers in mark-renderer.ts.
+ * Parameterized marks (color, fontSize, fontFamily) use
+ * inline styles for dynamic values — not covered here.
+ * -------------------------------------------------------- */
+
+.rtif-bold { font-weight: 700; }
+.rtif-italic { font-style: italic; }
+.rtif-underline { text-decoration: underline; }
+.rtif-strikethrough { text-decoration: line-through; }
+.rtif-underline.rtif-strikethrough { text-decoration: underline line-through; }
+
+.rtif-code {
+  font-family: 'SF Mono', Menlo, Consolas, monospace;
+  font-size: 0.875em;
+  padding: 0.15em 0.35em;
+  border-radius: 3px;
+  background: #f0f0f0;
+}
+
+.rtif-link {
+  color: #1a73e8;
+  text-decoration: underline;
+  cursor: pointer;
+}

package/styles/mention.css

@@ -0,0 +1,17 @@
+/* --------------------------------------------------------
+ * RTIF Mention Chip Styles
+ *
+ * Inline mention chip rendered by mention-plugin.ts.
+ * The element has contenteditable="false" and atomic: true.
+ * -------------------------------------------------------- */
+
+.rtif-mention {
+  display: inline;
+  padding: 0.1em 0.4em;
+  border-radius: 4px;
+  background: #e8f0fe;
+  color: #1a5ccc;
+  font-weight: 500;
+  font-size: 0.9375em;
+  white-space: nowrap;
+}