@one2x/medeo-rte 0.0.0-stage → 0.1.0

package/dist/style.css

@@ -0,0 +1,718 @@
+/* medeo-rte 核心样式：文档渲染、光标、选区、嵌入对象。
+   工具栏、状态栏、小地图等宿主外壳样式不在这里。
+   色板挂在 .mini-editor 上，禁止写到 :root，避免污染宿主（如 Medeo）的页面底色。 */
+
+.mini-editor {
+  --page: #fff;
+  --ink: #1f2329;
+  --muted: #667085;
+  --line: #e6e8eb;
+  --brand: #2b6cff;
+  --sel: rgba(43, 108, 255, 0.22);
+  --bg: #eef1f6;
+  --toolbar: #f7f8fa;
+  --mini-caret-color: #09090b;
+  --mini-caret-width: 2px;
+  --mini-ime-underline-color: #1f2329;
+  --mini-ime-underline-width: 2px;
+  --mini-sel-color: rgba(43, 108, 255, 0.22);
+  --mini-sel-radius: 0px;
+  --mini-font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+}
+
+.mini-editor,
+.mini-editor *,
+.mini-editor *::before,
+.mini-editor *::after {
+  box-sizing: border-box;
+}
+
+.mini-editor {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  position: relative;
+  /*
+   * 默认字体与 measure.ts 的 FONT_FAMILY 一致。宿主 textDefaults.fontFamily
+   * 会写成 --mini-font-family，测宽与绘制必须用同一栈。
+   */
+  font-family: var(--mini-font-family, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif);
+  font-weight: var(--mini-font-weight, 400);
+  letter-spacing: 0;
+  word-spacing: 0;
+  font-kerning: none;
+  font-variant: normal;
+  font-feature-settings: normal;
+}
+
+/*
+ * 编辑器默认贴合外部容器:不设四周留白、不设最小高度、不加纸张阴影/圆角。
+ * 编辑器把自己定位为可嵌入的容器自适应组件,而非固定尺寸的“页面/文档”。
+ * 若宿主需要纸张观感(留白、阴影、整页最小高度),应在宿主层自行添加(参见 demo)。
+ */
+.mini-page-wrap {
+  flex: 1;
+  overflow: auto;
+}
+
+.mini-page {
+  width: 100%;
+  min-height: 100%;
+  position: relative;
+}
+
+.mini-surface {
+  position: relative;
+  min-height: 100%;
+  background: var(--page);
+}
+
+.mini-editor[data-surface='transparent'] .mini-surface {
+  background: transparent;
+}
+
+.mini-canvas {
+  display: block;
+}
+
+.mini-canvas-chrome {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 4;
+}
+
+.mini-layer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.mini-content {
+  z-index: 1;
+}
+
+.mini-embeds {
+  z-index: 1;
+  pointer-events: none;
+}
+
+.mini-selection {
+  z-index: 0;
+}
+
+.mini-run,
+.mini-list-marker,
+.mini-image,
+.mini-table,
+.mini-cell,
+.mini-sel-rect,
+.mini-vblock,
+.mini-vblock-outline,
+.mini-caret,
+.mini-ime,
+.mini-ime-bar,
+.mini-placeholder,
+.mini-deco,
+.mini-resize {
+  position: absolute;
+}
+
+.mini-run,
+.mini-list-marker {
+  white-space: pre;
+  pointer-events: none;
+  letter-spacing: 0;
+  word-spacing: 0;
+  font-kerning: none;
+  /*
+   * 关闭 CJK 与拉丁/数字之间的自动间距。排版测量走 canvas measureText,不会在中西文
+   * 边界插入任何间距;若绘制端沿用浏览器默认的 text-autospace: normal,DOM 会在每个
+   * 中西文边界插入约数像素间距,使渲染文字比排版逐字测量更宽,光标/选区随之与可见文字
+   * 错位(中西文穿插越多、边界越多,累积偏差越大)。这里强制与测量口径一致,不受宿主
+   * 全局样式影响。text-spacing-trim 一并锁定以覆盖不同浏览器的实现差异。
+   */
+  text-autospace: no-autospace;
+  -webkit-text-autospace: no-autospace;
+  text-spacing-trim: space-all;
+}
+
+.mini-run {
+  /* 垂直居中靠 line-height(painter 设为行高)。family/weight 由根变量继承，避免 font 简写把整串 family 解析坏。 */
+  overflow: visible;
+  font-family: inherit;
+}
+
+.mini-list-marker {
+  color: var(--muted);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 8px;
+  font-size: 16px;
+}
+
+.mini-image {
+  pointer-events: none;
+  object-fit: contain;
+  user-select: none;
+}
+
+.mini-image.is-inline {
+  object-fit: cover;
+  border-radius: 6px;
+}
+
+.mini-embed {
+  position: absolute;
+  box-sizing: border-box;
+}
+
+.mini-embed-interactive {
+  pointer-events: auto;
+}
+
+.mini-host {
+  max-width: var(--mini-content-width);
+}
+
+/* 宿主渲染块：外层由 SDK 定位占位，内层由宿主内容自然撑开（也是自动测尺的观察对象）。
+   内层必须按内容测宽，不能当 flex 子项被外层回填宽度挤扁，否则后随文字会叠进胶囊。
+   max-width 钳在行宽上，文本槽超宽时在槽内折行而不是撑出编辑器。 */
+.mini-host-inner {
+  display: inline-flex;
+  align-items: center;
+  max-width: var(--mini-content-width);
+  line-height: 0;
+  vertical-align: bottom;
+}
+
+.mini-video {
+  pointer-events: auto;
+  background: #111827;
+  object-fit: contain;
+}
+
+.mini-code {
+  display: flex;
+  flex-direction: column;
+  background: #f4f6f8;
+  border: 1px solid #e6e8eb;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.mini-code-bar {
+  height: 28px;
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+  border-bottom: 1px solid #e6e8eb;
+  background: #eef1f6;
+  flex: none;
+}
+
+.mini-code-lang {
+  border: none;
+  background: transparent;
+  font: inherit;
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.mini-code-input {
+  flex: 1;
+  margin: 0;
+  padding: 8px 12px;
+  border: none;
+  resize: none;
+  background: transparent;
+  font: 13px/18px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  color: var(--ink);
+  outline: none;
+}
+
+.mini-formula {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f7f8fa;
+  border: 1px solid #e6e8eb;
+  border-radius: 6px;
+  padding: 4px 8px;
+}
+
+.mini-formula.is-editing {
+  min-width: 220px;
+  min-height: 56px;
+  height: auto;
+  background: #fff;
+  z-index: 3;
+}
+
+.mini-formula-view {
+  overflow: hidden;
+}
+
+.mini-formula-host {
+  width: 100%;
+}
+
+.mini-formula-math {
+  width: 100%;
+  min-height: 40px;
+  border: none;
+  outline: none;
+  font-size: 18px;
+}
+
+.mini-slot {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 12px 0 8px;
+  border-radius: 999px;
+  background: #f2f4f7;
+  color: #98a2b3;
+  font-size: 13px;
+  line-height: 28px;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  z-index: 2;
+}
+
+.mini-slot.is-filled {
+  background: #e9edf5;
+  color: #1f2329;
+}
+
+.mini-slot.is-image-filled {
+  padding: 2px;
+  gap: 0;
+  background: #eef1f6;
+}
+
+.mini-slot.is-editing {
+  background: #fff;
+  box-shadow: 0 0 0 2px var(--brand);
+  z-index: 8;
+}
+
+.mini-slot-icon[hidden],
+.mini-slot-text[hidden],
+.mini-slot-thumb[hidden],
+.mini-slot-input[hidden] {
+  display: none !important;
+}
+
+.mini-slot-icon {
+  display: flex;
+  width: 16px;
+  height: 16px;
+  flex: none;
+}
+
+.mini-slot-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mini-slot-thumb {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 10px;
+  pointer-events: none;
+}
+
+.mini-slot-input {
+  flex: 1;
+  min-width: 64px;
+  width: 100%;
+  border: none;
+  background: transparent;
+  padding: 0;
+  font: inherit;
+  font-size: 13px;
+  color: var(--ink);
+  outline: none;
+}
+
+.mini-slot-file {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.mini-slot-menu {
+  position: absolute;
+  left: 0;
+  top: calc(100% + 6px);
+  min-width: 100%;
+  background: #fff;
+  border: 1px solid #e6e8eb;
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(31, 35, 41, 0.12);
+  padding: 4px;
+  z-index: 20;
+}
+
+.mini-slot-menu button {
+  display: block;
+  width: 100%;
+  border: none;
+  background: transparent;
+  text-align: left;
+  padding: 6px 10px;
+  border-radius: 6px;
+  font: inherit;
+  font-size: 13px;
+  color: #1f2329;
+  cursor: pointer;
+}
+
+.mini-slot-menu button:hover,
+.mini-slot-menu button.is-on {
+  background: #f2f4f7;
+}
+
+.mini-ref {
+  background: #fff8dc;
+  border: none;
+  border-radius: 3px;
+  overflow: visible;
+  z-index: 2;
+}
+
+.mini-ref.is-editing {
+  z-index: 6;
+}
+
+.mini-ref-badge {
+  position: absolute;
+  top: -16px;
+  left: 0;
+  border: none;
+  background: var(--page);
+  color: #4c6ad9;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 16px;
+  padding: 0 4px 0 0;
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+.mini-ref:hover .mini-ref-badge,
+.mini-ref.is-selected .mini-ref-badge,
+.mini-ref.is-editing .mini-ref-badge {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.mini-ref-badge:hover {
+  text-decoration: underline;
+}
+
+.mini-ref-body {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.mini-ref-line {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.mini-ref-hole {
+  position: absolute;
+}
+
+.mini-ref-hole {
+  background: #eef1f6;
+  border-radius: 4px;
+  color: #98a2b3;
+  font-size: 11px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mini-embed-frame.is-ref {
+  border-radius: 2px;
+  background: transparent;
+  box-shadow: none;
+}
+
+.mini-embed-frame.is-slot {
+  border-radius: 999px;
+}
+
+.mini-embed-frame.is-slot.is-image {
+  border-radius: 10px;
+}
+
+.mini-table {
+  pointer-events: none;
+  z-index: 0;
+}
+
+.mini-cell {
+  border: 1px solid #c9cdd4;
+  box-sizing: border-box;
+}
+
+.mini-sel-rect {
+  border-radius: var(--mini-sel-radius, 0px);
+  background: var(--mini-sel-color, var(--sel));
+}
+
+.mini-vblock {
+  pointer-events: none;
+  box-sizing: border-box;
+  z-index: 0;
+}
+
+.mini-vblock-outline {
+  pointer-events: none;
+  box-sizing: border-box;
+  background: transparent;
+  border: 2px solid var(--brand);
+  z-index: 2;
+}
+
+.mini-editor[data-caret='rainbow'] .mini-sel-rect {
+  background: var(
+    --mini-sel-color,
+    linear-gradient(90deg, rgba(255, 77, 109, 0.16), rgba(43, 108, 255, 0.22))
+  );
+  border-radius: var(--mini-sel-radius, 6px);
+  box-shadow: inset 0 0 0 1px rgba(43, 108, 255, 0.18);
+}
+
+.mini-editor[data-caret='solid'] .mini-sel-rect {
+  box-shadow: none;
+}
+
+.mini-caret {
+  width: 3px;
+  border-radius: 2px;
+  background: linear-gradient(180deg, #ff4d6d 0%, #ffd166 35%, #06d6a0 65%, #4cc9f0 100%);
+  box-shadow: 0 0 8px rgba(76, 201, 240, 0.65);
+  pointer-events: none;
+  z-index: 4;
+  transform-origin: bottom center;
+}
+
+.mini-caret.is-italic {
+  transform: skewX(-14deg);
+}
+
+.mini-caret-trail {
+  filter: blur(0.4px);
+  box-shadow: none;
+}
+
+.mini-editor[data-caret='solid'] .mini-caret {
+  width: var(--mini-caret-width, 2px);
+  border-radius: 0;
+  background: var(--mini-caret-color, #09090b);
+  box-shadow: none;
+  animation: mini-caret-blink 1.06s step-end infinite;
+}
+
+.mini-editor[data-caret='solid'] .mini-caret-trail {
+  display: none;
+}
+
+@keyframes mini-caret-blink {
+  50% {
+    opacity: 0;
+  }
+}
+
+.mini-deco {
+  pointer-events: none;
+  z-index: 1;
+}
+
+.mini-deco-single::after,
+.mini-deco-double::after,
+.mini-deco-dotted::after,
+.mini-deco-wavy::after,
+.mini-deco-marker::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+}
+
+.mini-deco-single::after {
+  bottom: 4px;
+  height: 1.5px;
+  background: currentColor;
+}
+
+.mini-deco-double::after {
+  bottom: 3px;
+  height: 5px;
+  background: linear-gradient(currentColor, currentColor) top / 100% 1.5px no-repeat,
+    linear-gradient(currentColor, currentColor) bottom / 100% 1.5px no-repeat;
+}
+
+.mini-deco-dotted::after {
+  bottom: 4px;
+  height: 2px;
+  background: radial-gradient(circle, currentColor 1px, transparent 1.3px) 0 0 / 6px 2px repeat-x;
+}
+
+.mini-deco-wavy::after {
+  bottom: 2px;
+  height: 6px;
+  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 3 Q 2.5 0 5 3 T 10 3' fill='none' stroke='%232b6cff' stroke-width='1.3'/></svg>")
+    repeat-x bottom;
+}
+
+.mini-deco-marker::after {
+  bottom: 5px;
+  height: 8px;
+  background: rgba(255, 209, 102, 0.48);
+  border-radius: 4px;
+  transform: rotate(-1.2deg);
+}
+
+.mini-deco.is-strike::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: 1.5px;
+  background: currentColor;
+}
+
+.mini-run.is-fill {
+  -webkit-text-fill-color: transparent;
+}
+
+.mini-placeholder {
+  color: var(--muted);
+  pointer-events: none;
+  user-select: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  z-index: 1;
+}
+
+.mini-ime-bar {
+  display: none;
+  position: absolute;
+  height: var(--mini-ime-underline-width, 2px);
+  border-radius: 0;
+  background: var(--mini-ime-underline-color, #1f2329);
+  box-shadow: none;
+  pointer-events: none;
+  z-index: 8;
+}
+
+.mini-page.is-flipping {
+  animation: mini-flip 0.45s ease;
+}
+
+@keyframes mini-flip {
+  0% {
+    transform: perspective(900px) rotateY(0);
+  }
+  45% {
+    transform: perspective(900px) rotateY(88deg);
+    opacity: 0.55;
+  }
+  100% {
+    transform: perspective(900px) rotateY(0);
+    opacity: 1;
+  }
+}
+
+.mini-ime {
+  min-width: 1px;
+  width: 1px;
+  opacity: 0;
+  z-index: 6;
+  outline: none;
+  white-space: pre;
+  overflow: hidden;
+  caret-color: transparent;
+  color: var(--ink);
+  display: flex;
+  align-items: center;
+  /* 命中交给页面/表面；IME 只靠程序 focus 接收按键。 */
+  pointer-events: none;
+}
+
+/*
+ * 组合态：组合串已镜像插入文档模型、由正文渲染出来（字体字号都对），所以这个
+ * 输入靶子里系统重绘的那份组合串是重复的，让它整体隐形。
+ *
+ * Safari / WebKit 会在 contenteditable 组合串上再画一条系统 IME 下划线，
+ * `text-decoration: none` 去不掉；若 overflow:visible + opacity:1，就会和自绘
+ * imeBar 叠成两条线。这里把靶子裁成 1px 并整体透明，只留候选框锚点。
+ * 可见的组合区提示交给自绘的 imeBar 与光标。
+ */
+.mini-ime.is-composing {
+  opacity: 0;
+  width: 1px;
+  min-width: 1px;
+  background: transparent;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  z-index: 7;
+  overflow: hidden;
+  caret-color: transparent;
+  text-decoration: none;
+  text-decoration-line: none;
+  -webkit-text-decoration-line: none;
+  box-shadow: none;
+}
+
+.mini-embed-frame {
+  display: none;
+  position: absolute;
+  box-sizing: border-box;
+  pointer-events: none;
+  z-index: 7;
+  border: 2px solid var(--brand);
+  border-radius: 6px;
+  background: rgba(43, 108, 255, 0.12);
+  box-shadow: 0 0 0 1px rgba(43, 108, 255, 0.2);
+}
+
+.mini-resize {
+  display: none;
+  width: 12px;
+  height: 12px;
+  background: var(--brand);
+  border: 2px solid #fff;
+  border-radius: 2px;
+  z-index: 8;
+  cursor: nwse-resize;
+  pointer-events: auto;
+  box-shadow: 0 0 0 1px rgba(31, 35, 41, 0.25);
+}
+
+.mini-surface.is-col-resize {
+  cursor: col-resize;
+}

package/dist/types/commands/index.d.ts

@@ -0,0 +1,4 @@
+export type { ArrowKey, CommandTable, EditorCommands } from './types';
+export type { KeyStroke, Shortcut } from './shortcuts';
+export { findShortcut, INPUT_SHORTCUTS, inputShortcuts, SHORTCUTS } from './shortcuts';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/commands/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/commands/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACtE,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/types/commands/selfcheck.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=selfcheck.d.ts.map

package/dist/types/commands/selfcheck.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selfcheck.d.ts","sourceRoot":"","sources":["../../../src/commands/selfcheck.ts"],"names":[],"mappings":""}