@aicayzer/inkkit 0.0.0-stage → 0.0.1

package/dist/style.css

@@ -0,0 +1,537 @@
+@import '@milkdown/kit/prose/tables/style/tables.css';
+
+:root {
+  /* The document's text size, which the app sets; every text metric below is in rem, so they scale with it. */
+  font-size: 15px;
+  --accent: #0a84ff;
+  --text: CanvasText;
+  --muted: color-mix(in srgb, CanvasText 55%, transparent);
+  --rule: color-mix(in srgb, CanvasText 14%, transparent);
+  --code-bg: color-mix(in srgb, CanvasText 8%, transparent);
+  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
+  color-scheme: light dark;
+}
+
+.inkkit-plain {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 100%;
+  border: 0;
+  resize: none;
+  outline: none;
+  padding: 10px 16px 48px;
+  background: transparent;
+  color: var(--text);
+  font: 1rem/1.5 var(--mono);
+}
+
+.inkkit-plain[hidden] {
+  display: none;
+}
+
+.milkdown-table-block {
+  position: relative;
+  margin: 1.5rem 0;
+}
+.milkdown-table-block .table-wrapper {
+  overflow-x: auto;
+}
+.milkdown-table-block table {
+  border-collapse: collapse;
+}
+.milkdown-table-block th,
+.milkdown-table-block td {
+  border: 1px solid var(--rule);
+  min-width: 3rem;
+  padding: 0.4rem 0.6rem;
+  vertical-align: top;
+}
+.milkdown-table-block th {
+  background: var(--code-bg);
+}
+.milkdown-table-block th p,
+.milkdown-table-block td p {
+  margin: 0;
+}
+.milkdown-table-block .handle,
+.milkdown-table-block .button-group,
+.milkdown-table-block .drag-preview {
+  position: absolute;
+  z-index: 20;
+}
+.milkdown-table-block [data-show='false'],
+.milkdown-table-block .button-group[data-show='false'],
+.milkdown-table-block.readonly .handle {
+  display: none;
+}
+.milkdown-table-block .cell-handle {
+  cursor: grab;
+  font-size: 0.75rem;
+  padding: 2px 5px;
+  border-radius: 5px;
+  background: Canvas;
+  color: var(--muted);
+  box-shadow: 0 0 0 1px var(--rule);
+}
+.milkdown-table-block .button-group {
+  display: flex;
+  gap: 3px;
+  padding: 4px;
+  border-radius: 6px;
+  background: Canvas;
+  box-shadow: 0 0 0 1px var(--rule);
+}
+.milkdown-table-block button {
+  color: var(--text);
+  background: Canvas;
+  border: 1px solid var(--rule);
+  border-radius: 4px;
+  padding: 4px 6px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.milkdown-table-block button:hover {
+  background: var(--code-bg);
+}
+.milkdown-table-block .line-handle {
+  background: var(--accent);
+  min-width: 1px;
+  min-height: 1px;
+}
+.milkdown-table-block .add-button {
+  position: absolute;
+  padding: 2px 5px;
+  transform: translate(-50%, -50%);
+  background: Canvas;
+  color: var(--text);
+  border: 1px solid var(--rule);
+  border-radius: 4px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.milkdown-table-block .line-handle[data-display-type='indicator'] .add-button {
+  display: none;
+}
+.milkdown-table-block .drag-preview {
+  opacity: 0.6;
+  background: Canvas;
+  outline: 1px solid var(--accent);
+}
+
+.ProseMirror .image {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  vertical-align: bottom;
+}
+.ProseMirror .image img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px;
+}
+.ProseMirror .image-absent {
+  color: var(--muted);
+  font-style: italic;
+}
+.ProseMirror .image-handle {
+  position: absolute;
+  right: -3px;
+  top: 0;
+  width: 10px;
+  height: 100%;
+  cursor: col-resize;
+  opacity: 0;
+}
+.ProseMirror .image:hover .image-handle,
+.ProseMirror .image-handle:active {
+  opacity: 1;
+}
+.ProseMirror .image-handle::after {
+  content: '';
+  position: absolute;
+  right: 3px;
+  top: 25%;
+  height: 50%;
+  width: 4px;
+  border-radius: 2px;
+  background: var(--accent);
+}
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+  background: transparent;
+}
+
+body {
+  color: var(--text);
+  /* WebKit paints the native caret using this line box; extra leading stretches it above the text. */
+  font:
+    1rem/normal -apple-system,
+    BlinkMacSystemFont,
+    system-ui,
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-size-adjust: none;
+}
+
+/* The page scrolls inside #editor so the fade under the formatting bar stays put. */
+#editor {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.ProseMirror {
+  /* The viewport, not the wrapper Milkdown adds, so a click below the text still places the caret. */
+  min-height: 100vh;
+  box-sizing: border-box;
+  /* Scroll the final line above the floating footer without reserving a solid row. */
+  /* Keep the editor full-width for hit testing; center only the writing column. */
+  padding: 10px max(16px, calc((100% - var(--reading-width, 100%)) / 2 + 16px))
+    48px;
+  outline: none;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  caret-color: var(--accent);
+  cursor: text;
+}
+
+.ProseMirror .empty {
+  position: relative;
+}
+
+.ProseMirror .empty::before {
+  content: attr(data-placeholder);
+  position: absolute;
+  color: var(--muted);
+  pointer-events: none;
+}
+
+/* The selection plugin draws the selection over the text alone; the engine's own fills the margins too. */
+.ProseMirror ::selection {
+  background: transparent;
+}
+
+::highlight(selection) {
+  background-color: color-mix(in srgb, var(--accent) 30%, transparent);
+}
+
+.ProseMirror > :first-child {
+  margin-top: 0;
+}
+
+.ProseMirror p {
+  margin: 0 0 0.667rem;
+}
+
+.ProseMirror h1,
+.ProseMirror h2,
+.ProseMirror h3 {
+  line-height: 1.25;
+  letter-spacing: -0.01em;
+  margin: 1.867rem 0 0.533rem;
+}
+
+.ProseMirror h1 {
+  font-size: 1.733rem;
+  font-weight: 700;
+}
+
+.ProseMirror h2 {
+  font-size: 1.4rem;
+  font-weight: 700;
+}
+
+.ProseMirror h3 {
+  font-size: 1.133rem;
+  font-weight: 600;
+}
+
+.ProseMirror h4,
+.ProseMirror h5,
+.ProseMirror h6 {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 1.333rem 0 0.4rem;
+}
+
+.ProseMirror strong {
+  font-weight: 700;
+}
+
+.ProseMirror a {
+  color: var(--accent);
+  text-decoration: none;
+  text-underline-offset: 2px;
+}
+
+.ProseMirror a:hover {
+  text-decoration: underline;
+}
+
+.meta .ProseMirror a {
+  cursor: pointer;
+}
+
+.ProseMirror code {
+  font-family: var(--mono);
+  font-size: 0.88em;
+  background: var(--code-bg);
+  border-radius: 5px;
+  padding: 0.067rem 0.333rem;
+}
+
+.ProseMirror pre {
+  position: relative;
+  font-family: var(--mono);
+  font-size: 0.867rem;
+  line-height: 1.5;
+  background: var(--code-bg);
+  border-radius: 8px;
+  padding: 0.8rem 0.933rem;
+  margin: 0 0 0.8rem;
+  overflow-x: auto;
+}
+
+.ProseMirror pre[data-language] {
+  padding-top: max(2rem, 30px);
+}
+
+.ProseMirror pre[data-language]::before {
+  content: attr(data-language);
+  position: absolute;
+  top: 0.533rem;
+  left: 0.933rem;
+  font:
+    0.733rem/1 -apple-system,
+    system-ui,
+    sans-serif;
+  color: var(--muted);
+  text-transform: lowercase;
+  user-select: none;
+}
+
+.ProseMirror pre .copy {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 24px;
+  border: 0;
+  border-radius: 6px;
+  background: color-mix(in srgb, CanvasText 10%, transparent);
+  color: var(--muted);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 120ms;
+  user-select: none;
+}
+
+.ProseMirror pre:hover .copy,
+.ProseMirror pre .copy[data-copied] {
+  opacity: 1;
+}
+
+.ProseMirror pre .copy:hover {
+  color: var(--text);
+}
+
+.ProseMirror pre code {
+  background: none;
+  padding: 0;
+  font-size: inherit;
+}
+
+.ProseMirror blockquote {
+  margin: 0 0 0.8rem;
+  padding: 2px 0 2px 0.8rem;
+  border-left: 2px solid var(--accent);
+}
+
+.ProseMirror blockquote > :first-child {
+  margin-top: 0;
+}
+
+.ProseMirror blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+.ProseMirror hr {
+  border: 0;
+  border-top: 1px solid var(--rule);
+  margin: 1.333rem 0;
+}
+
+.ProseMirror ul,
+.ProseMirror ol {
+  margin: 0 0 0.667rem;
+  padding-left: 1.733rem;
+}
+
+.ProseMirror li {
+  margin: 0 0 0.267rem;
+}
+
+.ProseMirror li > p {
+  margin: 0;
+}
+
+.ProseMirror li ul,
+.ProseMirror li ol {
+  margin-top: 0.267rem;
+  margin-bottom: 0;
+}
+
+.ProseMirror ul > li::marker,
+.ProseMirror ol > li::marker {
+  color: var(--accent);
+}
+
+.ProseMirror li[data-item-type='task'] {
+  list-style: none;
+  position: relative;
+}
+
+.ProseMirror li[data-item-type='task']::before {
+  content: '';
+  position: absolute;
+  left: -1.667rem;
+  top: 0.32em;
+  width: 0.933rem;
+  height: 0.933rem;
+  box-sizing: border-box;
+  border: 1.5px solid color-mix(in srgb, CanvasText 35%, transparent);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.ProseMirror li[data-item-type='task'][data-checked='true']::before {
+  border-color: var(--accent);
+  background: var(--accent);
+}
+
+.ProseMirror li[data-item-type='task'][data-checked='true']::after {
+  content: '';
+  position: absolute;
+  left: -1.333rem;
+  top: 0.32em;
+  margin-top: 0.133rem;
+  width: 0.2rem;
+  height: 0.467rem;
+  border: solid Canvas;
+  border-width: 0 1.5px 1.5px 0;
+  transform: rotate(45deg);
+  pointer-events: none;
+}
+
+.ProseMirror li[data-item-type='task'][data-checked='true'] > p {
+  color: var(--muted);
+}
+
+.ProseMirror del {
+  color: var(--muted);
+}
+
+.ProseMirror .ProseMirror-selectednode {
+  outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* Syntax colors: One Dark and One Light, without the blues. */
+:root {
+  --code-comment: var(--muted);
+  --code-keyword: #a626a4;
+  --code-string: #50a14f;
+  --code-number: #986801;
+  --code-title: #c18401;
+  --code-attr: #e45649;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --code-keyword: #c678dd;
+    --code-string: #98c379;
+    --code-number: #d19a66;
+    --code-title: #e5c07b;
+    --code-attr: #e06c75;
+  }
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: var(--code-comment);
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-literal,
+.hljs-built_in,
+.hljs-type,
+.hljs-selector-tag,
+.hljs-doctag {
+  color: var(--code-keyword);
+}
+
+.hljs-string,
+.hljs-regexp,
+.hljs-addition,
+.hljs-template-tag {
+  color: var(--code-string);
+}
+
+.hljs-number,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-link,
+.hljs-meta {
+  color: var(--code-number);
+}
+
+.hljs-title,
+.hljs-section,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: var(--code-title);
+}
+
+.hljs-attr,
+.hljs-attribute,
+.hljs-property,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag,
+.hljs-deletion {
+  color: var(--code-attr);
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: 700;
+}
+
+[hidden] {
+  display: none !important;
+}
+.ProseMirror-search-match {
+  background: color-mix(in srgb, var(--accent) 25%, transparent);
+}
+
+.ProseMirror-active-search-match {
+  background: color-mix(in srgb, var(--accent) 55%, transparent);
+}
+
+.ProseMirror .literal-markdown {
+  white-space: pre-wrap;
+  font-family: var(--mono);
+  font-size: 0.9rem;
+}

package/dist/tables.d.ts

@@ -0,0 +1,7 @@
+import type { Ctx } from '@milkdown/kit/ctx';
+export type TableCommand = 'insert' | 'addRowBefore' | 'addRowAfter' | 'addColumnBefore' | 'addColumnAfter' | 'deleteRow' | 'deleteColumn' | 'deleteTable' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'exit';
+export declare const tablePlugins: (((ctx: Ctx) => () => void) | import("@milkdown/kit/ctx").MilkdownPlugin)[];
+export declare function tableCommand(ctx: Ctx, command: TableCommand, options?: {
+    rows?: number;
+    columns?: number;
+}): boolean;

package/dist/tables.js

@@ -0,0 +1,80 @@
+import { commandsCtx, editorViewCtx } from '@milkdown/kit/core';
+import { tableBlock, tableBlockConfig, } from '@milkdown/kit/component/table-block';
+import { insertTableCommand, exitTable } from '@milkdown/kit/preset/gfm';
+import { addRowAfter, addRowBefore, addColumnAfter, addColumnBefore, deleteRow, deleteColumn, deleteTable, goToNextCell, selectedRect, TableMap, isInTable, } from '@milkdown/kit/prose/tables';
+import { keymap } from '@milkdown/kit/prose/keymap';
+import { $prose } from '@milkdown/kit/utils';
+const labels = {
+    add_row: 'Add row',
+    add_col: 'Add column',
+    delete_row: 'Delete row',
+    delete_col: 'Delete column',
+    align_col_left: 'Align left',
+    align_col_center: 'Align center',
+    align_col_right: 'Align right',
+    col_drag_handle: 'Move column',
+    row_drag_handle: 'Move row',
+};
+export const tablePlugins = [
+    tableBlockConfig,
+    (ctx) => () => {
+        ctx.update(tableBlockConfig.key, (config) => ({
+            ...config,
+            renderButton: (type) => `<span role="img" aria-label="${labels[type]}">${labels[type]}</span>`,
+        }));
+    },
+    tableBlock,
+    $prose(() => keymap({ Tab: goToNextCell(1), 'Shift-Tab': goToNextCell(-1) })),
+].flat();
+export function tableCommand(ctx, command, options) {
+    const view = ctx.get(editorViewCtx);
+    const commands = ctx.get(commandsCtx);
+    if (command === 'insert') {
+        const row = options?.rows ?? 3, col = options?.columns ?? 2;
+        if (!Number.isInteger(row) ||
+            !Number.isInteger(col) ||
+            row < 1 ||
+            row > 100 ||
+            col < 1 ||
+            col > 100)
+            throw new RangeError('Table dimensions must be integers from 1 to 100');
+        return commands.call(insertTableCommand.key, { row, col });
+    }
+    if (command === 'exit')
+        return commands.call(exitTable.key);
+    if (command === 'alignLeft' ||
+        command === 'alignCenter' ||
+        command === 'alignRight') {
+        if (!isInTable(view.state))
+            return false;
+        const rect = selectedRect(view.state), map = TableMap.get(rect.table);
+        const alignment = command === 'alignLeft'
+            ? 'left'
+            : command === 'alignRight'
+                ? 'right'
+                : 'center';
+        const tr = view.state.tr;
+        // GFM stores alignment on the header; apply it to the entire column so
+        // editing a body cell does not disappear when Markdown is saved.
+        const positions = new Set();
+        for (let row = 0; row < map.height; row++)
+            for (let col = rect.left; col < rect.right; col++)
+                positions.add(map.map[row * map.width + col]);
+        for (const offset of positions) {
+            const pos = rect.tableStart + offset, cell = tr.doc.nodeAt(pos);
+            tr.setNodeMarkup(pos, undefined, { ...cell.attrs, alignment });
+        }
+        view.dispatch(tr);
+        return true;
+    }
+    const actions = {
+        addRowBefore,
+        addRowAfter,
+        addColumnBefore,
+        addColumnAfter,
+        deleteRow,
+        deleteColumn,
+        deleteTable,
+    };
+    return actions[command](view.state, view.dispatch);
+}

package/dist/tasks.d.ts

@@ -0,0 +1,3 @@
+import type { Ctx } from '@milkdown/kit/ctx';
+export declare const taskListPlugin: import("@milkdown/kit/utils").$Prose;
+export declare function toggleTaskList(ctx: Ctx): void;

package/dist/tasks.js

@@ -0,0 +1,49 @@
+import { commandsCtx, editorViewCtx } from '@milkdown/kit/core';
+import { wrapInBulletListCommand } from '@milkdown/kit/preset/commonmark';
+import { Plugin, PluginKey } from '@milkdown/kit/prose/state';
+import { $prose } from '@milkdown/kit/utils';
+// A click on the task marker lands on the <li> itself, since the marker is a
+// pseudo-element; clicks inside the item's text land on its children.
+export const taskListPlugin = $prose(() => new Plugin({
+    key: new PluginKey('taskToggle'),
+    props: {
+        handleClickOn(view, _pos, node, nodePos, event) {
+            if (node.type.name !== 'list_item' || node.attrs.checked == null)
+                return false;
+            const target = event.target;
+            if (!target.matches('li[data-item-type="task"]'))
+                return false;
+            view.dispatch(view.state.tr.setNodeMarkup(nodePos, undefined, {
+                ...node.attrs,
+                checked: !node.attrs.checked,
+            }));
+            return true;
+        },
+    },
+}));
+function listItemsInSelection(view) {
+    const { from, to } = view.state.selection;
+    const items = [];
+    view.state.doc.nodesBetween(from, to, (node, pos) => {
+        if (node.type.name === 'list_item')
+            items.push({ pos, node });
+    });
+    return items;
+}
+export function toggleTaskList(ctx) {
+    const view = ctx.get(editorViewCtx);
+    let items = listItemsInSelection(view);
+    if (items.length === 0) {
+        ctx.get(commandsCtx).call(wrapInBulletListCommand.key);
+        items = listItemsInSelection(view);
+    }
+    const allTasks = items.every(({ node }) => node.attrs.checked != null);
+    let tr = view.state.tr;
+    for (const { pos, node } of items) {
+        tr = tr.setNodeMarkup(pos, undefined, {
+            ...node.attrs,
+            checked: allTasks ? null : (node.attrs.checked ?? false),
+        });
+    }
+    view.dispatch(tr);
+}