@rtif-sdk/web 1.4.0 → 1.6.0

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/context-menu.css

@@ -0,0 +1,58 @@
+/* --------------------------------------------------------
+ * RTIF Context Menu Styles
+ *
+ * Right-click menu for Cut/Copy/Paste/Select All.
+ * Positioned via JS (top/left). All visual properties
+ * are CSS-driven. Uses RTIF CSS custom properties.
+ * -------------------------------------------------------- */
+
+.rtif-context-menu {
+  position: fixed;
+  z-index: var(--rtif-z-popover, 9999);
+  background-color: var(--rtif-surface, #fff);
+  border: 1px solid var(--rtif-border, #d0d0d0);
+  border-radius: var(--rtif-radius, 6px);
+  box-shadow: var(--rtif-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
+  padding: 4px 0;
+  min-width: 180px;
+  font-family: var(--rtif-ui-font, system-ui, -apple-system, sans-serif);
+  font-size: var(--rtif-ui-font-size, 13px);
+  line-height: 1;
+  user-select: none;
+}
+
+.rtif-context-menu-separator {
+  height: 1px;
+  background-color: var(--rtif-border, #e0e0e0);
+  margin: 4px 0;
+}
+
+.rtif-context-menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 12px;
+  cursor: pointer;
+  color: #333;
+}
+
+.rtif-context-menu-item[aria-disabled="true"] {
+  cursor: default;
+  color: #999;
+}
+
+.rtif-context-menu-item:not([aria-disabled="true"]):hover,
+.rtif-context-menu-item-highlighted:not([aria-disabled="true"]) {
+  background-color: var(--rtif-accent-color, #2563eb);
+  color: #fff;
+}
+
+.rtif-context-menu-item-highlighted:not([aria-disabled="true"]) .rtif-context-menu-item-shortcut {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.rtif-context-menu-item-shortcut {
+  margin-left: 24px;
+  color: #999;
+  font-size: 12px;
+}

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;
+}