silk-compose 0.0.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +27 -17
- package/dist/index.d.ts +19 -11
- package/dist/silk.css +1 -1
- package/dist/silk.js +987 -890
- package/package.json +5 -14
package/README.md
CHANGED
|
@@ -7,11 +7,11 @@ Silk ships as a single component with styles, sensible defaults, and a curated f
|
|
|
7
7
|
## Install
|
|
8
8
|
|
|
9
9
|
```bash
|
|
10
|
-
npm install silk-compose
|
|
11
|
-
@lexical/code-shiki @lexical/history @lexical/link @lexical/list \
|
|
12
|
-
@lexical/markdown @lexical/selection @lexical/dragon
|
|
10
|
+
npm install silk-compose
|
|
13
11
|
```
|
|
14
12
|
|
|
13
|
+
All Lexical dependencies are included automatically.
|
|
14
|
+
|
|
15
15
|
## Quick start
|
|
16
16
|
|
|
17
17
|
```tsx
|
|
@@ -27,19 +27,30 @@ That's it. You get a fully functional editor with formatting, code blocks, lists
|
|
|
27
27
|
|
|
28
28
|
## Saving and restoring content
|
|
29
29
|
|
|
30
|
-
Silk uses Lexical's native serialization. Pass
|
|
30
|
+
Silk uses Lexical's native serialization. Pass a `ref` to get a handle with a `getState()` method that returns the editor content as a JSON string. Pass that string back as `initialEditorState` to restore it.
|
|
31
31
|
|
|
32
32
|
```tsx
|
|
33
|
+
import { useRef } from "react";
|
|
34
|
+
import { SilkEditor } from "silk-compose";
|
|
35
|
+
import type { SilkEditorHandle } from "silk-compose";
|
|
36
|
+
import "silk-compose/styles";
|
|
37
|
+
|
|
33
38
|
function App() {
|
|
34
|
-
const
|
|
35
|
-
|
|
36
|
-
)
|
|
39
|
+
const editorRef = useRef<SilkEditorHandle>(null);
|
|
40
|
+
|
|
41
|
+
const handleSave = () => {
|
|
42
|
+
const json = editorRef.current?.getState();
|
|
43
|
+
if (json) saveToDatabase(json);
|
|
44
|
+
};
|
|
37
45
|
|
|
38
46
|
return (
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
47
|
+
<>
|
|
48
|
+
<SilkEditor
|
|
49
|
+
ref={editorRef}
|
|
50
|
+
initialEditorState={loadFromDatabase()}
|
|
51
|
+
/>
|
|
52
|
+
<button onClick={handleSave}>Save</button>
|
|
53
|
+
</>
|
|
43
54
|
);
|
|
44
55
|
}
|
|
45
56
|
```
|
|
@@ -50,11 +61,11 @@ The JSON string is a complete snapshot of the document — text, formatting, ima
|
|
|
50
61
|
|
|
51
62
|
| Prop | Type | Default | Description |
|
|
52
63
|
|---|---|---|---|
|
|
64
|
+
| `ref` | `Ref<SilkEditorHandle>` | — | Exposes `getState()` to read the serialized editor content on demand. |
|
|
53
65
|
| `editable` | `boolean` | `true` | Toggle between edit and read-only mode at runtime. |
|
|
54
|
-
| `
|
|
55
|
-
| `initialEditorState` | `string` | — | JSON string from a previous `onChange` to restore content. |
|
|
66
|
+
| `initialEditorState` | `string` | — | JSON string from a previous `getState()` call to restore content. |
|
|
56
67
|
| `features` | `SilkFeatures` | All enabled | Toggle feature groups on/off. |
|
|
57
|
-
| `namespace` | `string` | `"silk-
|
|
68
|
+
| `namespace` | `string` | `"silk-editor"` | Lexical editor namespace. |
|
|
58
69
|
| `className` | `string` | — | Additional CSS class on the container. |
|
|
59
70
|
| `theme` | `EditorThemeClasses` | — | Lexical theme overrides (deep-merged with defaults). |
|
|
60
71
|
| `onError` | `(error: Error) => void` | `console.error` | Error handler for Lexical. |
|
|
@@ -87,7 +98,7 @@ These are not feature-gated and are always available:
|
|
|
87
98
|
- **Horizontal rules** — section dividers
|
|
88
99
|
- **Slash commands** — type `/` to insert headings, code blocks, lists, notes, links, dividers
|
|
89
100
|
- **Markdown shortcuts** — `*`/`-` for bullet lists, `1.` for numbered lists, common text format triggers
|
|
90
|
-
- **Font controls** — size (10
|
|
101
|
+
- **Font controls** — size (10-36), family (Inter, SF Mono, Space Grotesk), and a curated color palette
|
|
91
102
|
- **Read-only mode** — pass `editable={false}` to disable editing; toolbars hide, links become directly clickable
|
|
92
103
|
|
|
93
104
|
## Styling
|
|
@@ -107,7 +118,7 @@ To customize the Lexical theme (class names applied to nodes), pass the `theme`
|
|
|
107
118
|
```tsx
|
|
108
119
|
// Component
|
|
109
120
|
import { SilkEditor } from "silk-compose";
|
|
110
|
-
import type { SilkEditorProps, SilkFeatures } from "silk-compose";
|
|
121
|
+
import type { SilkEditorProps, SilkEditorHandle, SilkFeatures } from "silk-compose";
|
|
111
122
|
|
|
112
123
|
// Nodes (for advanced Lexical integrations)
|
|
113
124
|
import { NoteNode, $createNoteNode, $isNoteNode } from "silk-compose";
|
|
@@ -117,7 +128,6 @@ import { ImageNode, $createImageNode, $isImageNode } from "silk-compose";
|
|
|
117
128
|
## Requirements
|
|
118
129
|
|
|
119
130
|
- React 18 or 19
|
|
120
|
-
- Lexical 0.41+
|
|
121
131
|
|
|
122
132
|
## License
|
|
123
133
|
|
package/dist/index.d.ts
CHANGED
|
@@ -4,17 +4,18 @@ import { DOMExportOutput } from 'lexical';
|
|
|
4
4
|
import { EditorConfig } from 'lexical';
|
|
5
5
|
import { EditorThemeClasses } from 'lexical';
|
|
6
6
|
import { ElementNode } from 'lexical';
|
|
7
|
-
import {
|
|
8
|
-
import { JSX
|
|
7
|
+
import { ForwardRefExoticComponent } from 'react';
|
|
8
|
+
import { JSX } from 'react';
|
|
9
9
|
import { LexicalEditor } from 'lexical';
|
|
10
10
|
import { LexicalNode } from 'lexical';
|
|
11
11
|
import { NodeKey } from 'lexical';
|
|
12
12
|
import { RangeSelection } from 'lexical';
|
|
13
|
+
import { RefAttributes } from 'react';
|
|
13
14
|
import { SerializedElementNode } from 'lexical';
|
|
14
15
|
import { SerializedLexicalNode } from 'lexical';
|
|
15
16
|
import { Spread } from 'lexical';
|
|
16
17
|
|
|
17
|
-
export declare function $createImageNode(src: string, altText?: string, width?: number, height?: number): ImageNode;
|
|
18
|
+
export declare function $createImageNode(src: string, altText?: string, width?: number, height?: number, alignment?: string): ImageNode;
|
|
18
19
|
|
|
19
20
|
export declare function $createNoteNode(noteType?: NoteType): NoteNode;
|
|
20
21
|
|
|
@@ -22,23 +23,26 @@ export declare function $isImageNode(node: LexicalNode | null | undefined): node
|
|
|
22
23
|
|
|
23
24
|
export declare function $isNoteNode(node: LexicalNode | null | undefined): node is NoteNode;
|
|
24
25
|
|
|
25
|
-
export declare class ImageNode extends DecoratorNode<
|
|
26
|
+
export declare class ImageNode extends DecoratorNode<JSX.Element> {
|
|
26
27
|
__src: string;
|
|
27
28
|
__altText: string;
|
|
28
29
|
__width: number | undefined;
|
|
29
30
|
__height: number | undefined;
|
|
31
|
+
__alignment: string;
|
|
30
32
|
static getType(): string;
|
|
31
33
|
static clone(node: ImageNode): ImageNode;
|
|
32
|
-
constructor(src: string, altText: string, width?: number, height?: number, key?: NodeKey);
|
|
34
|
+
constructor(src: string, altText: string, width?: number, height?: number, alignment?: string, key?: NodeKey);
|
|
35
|
+
getAlignment(): string;
|
|
36
|
+
setAlignment(alignment: string): void;
|
|
33
37
|
createDOM(): HTMLElement;
|
|
34
|
-
updateDOM():
|
|
38
|
+
updateDOM(prevNode: ImageNode, dom: HTMLElement): boolean;
|
|
35
39
|
isInline(): boolean;
|
|
36
40
|
isKeyboardSelectable(): boolean;
|
|
37
41
|
static importJSON(serializedNode: SerializedImageNode): ImageNode;
|
|
38
42
|
exportJSON(): SerializedImageNode;
|
|
39
43
|
exportDOM(): DOMExportOutput;
|
|
40
44
|
static importDOM(): DOMConversionMap | null;
|
|
41
|
-
decorate(_editor: LexicalEditor):
|
|
45
|
+
decorate(_editor: LexicalEditor): JSX.Element;
|
|
42
46
|
}
|
|
43
47
|
|
|
44
48
|
export declare class NoteNode extends ElementNode {
|
|
@@ -63,16 +67,22 @@ export declare type SerializedImageNode = Spread<{
|
|
|
63
67
|
altText: string;
|
|
64
68
|
width?: number;
|
|
65
69
|
height?: number;
|
|
70
|
+
alignment?: string;
|
|
66
71
|
}, SerializedLexicalNode>;
|
|
67
72
|
|
|
68
73
|
declare type SerializedNoteNode = Spread<{
|
|
69
74
|
noteType: NoteType;
|
|
70
75
|
}, SerializedElementNode>;
|
|
71
76
|
|
|
72
|
-
declare
|
|
77
|
+
declare const SilkEditor: ForwardRefExoticComponent<SilkEditorProps & RefAttributes<SilkEditorHandle>>;
|
|
73
78
|
export { SilkEditor }
|
|
74
79
|
export default SilkEditor;
|
|
75
80
|
|
|
81
|
+
export declare interface SilkEditorHandle {
|
|
82
|
+
/** Returns the current editor state as a JSON string. */
|
|
83
|
+
getState: () => string;
|
|
84
|
+
}
|
|
85
|
+
|
|
76
86
|
export declare interface SilkEditorProps {
|
|
77
87
|
features?: SilkFeatures;
|
|
78
88
|
namespace?: string;
|
|
@@ -80,9 +90,7 @@ export declare interface SilkEditorProps {
|
|
|
80
90
|
theme?: EditorThemeClasses;
|
|
81
91
|
editable?: boolean;
|
|
82
92
|
onError?: (error: Error) => void;
|
|
83
|
-
/**
|
|
84
|
-
onChange?: (serializedEditorState: string) => void;
|
|
85
|
-
/** JSON string from a previous `onChange` call to restore editor content. */
|
|
93
|
+
/** JSON string from a previous `getState()` call to restore editor content. */
|
|
86
94
|
initialEditorState?: string;
|
|
87
95
|
}
|
|
88
96
|
|
package/dist/silk.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap";.silk-editor-container{position:relative;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:#1a1a1a}.silk-root{position:relative;min-height:150px;outline:none;background-color:#faf9f7}.silk-content-editable{min-height:150px;outline:none;padding:8px 12px}.silk-content-editable:focus{outline:none}.silk-placeholder{position:absolute;top:8px;left:12px;color:#999;pointer-events:none;-webkit-user-select:none;user-select:none}.silk-paragraph{margin:0 0 8px;line-height:1.6}.silk-text-bold{font-weight:600}.silk-text-italic{font-style:italic}.silk-text-underline{text-decoration:underline}.silk-text-strikethrough{text-decoration:line-through}.silk-text-code{font-family:SF Mono,Fira Code,Fira Mono,Menlo,Consolas,monospace;background-color:#0000000a;border:1px solid rgba(0,0,0,.1);padding:2px 5px;border-radius:0;font-size:.875em}.silk-heading-h1{font-family:Space Grotesk,Inter,sans-serif;font-size:1.875em;font-weight:600;margin:0 0 12px;line-height:1.3;letter-spacing:-.02em}.silk-heading-h2{font-family:Space Grotesk,Inter,sans-serif;font-size:1.375em;font-weight:600;margin:0 0 10px;line-height:1.35;letter-spacing:-.01em}.silk-heading-h3{font-family:Space Grotesk,Inter,sans-serif;font-size:1.125em;font-weight:600;margin:0 0 8px;line-height:1.4}.silk-quote{margin:12px 0;padding:20px 24px;border-left:4px solid #ac3521;background-color:#f0efeb;color:#31332c;line-height:1.6}.silk-list-ul{margin:0 0 8px;padding-left:24px;list-style-type:disc}.silk-list-ol{margin:0 0 8px;padding-left:48px;list-style:none;counter-reset:silk-ol}.silk-list-item{margin:2px 0;line-height:1.6}.silk-list-ol>.silk-list-item:not(.silk-list-item-nested){counter-increment:silk-ol;position:relative;margin:14px 0}.silk-list-ol>.silk-list-item:not(.silk-list-item-nested):before{content:counter(silk-ol,decimal);position:absolute;left:-40px;color:#ac3521;font-weight:600;font-feature-settings:"tnum";width:28px;text-align:right}.silk-list-item-nested{list-style-type:none}.silk-list-ul .silk-list-ul{list-style-type:circle}.silk-list-ul .silk-list-ul .silk-list-ul{list-style-type:square}.silk-list-ol .silk-list-ol{counter-reset:silk-ol}.silk-list-ol .silk-list-ol>.silk-list-item:not(.silk-list-item-nested):before{content:counter(silk-ol,upper-alpha)}.silk-list-ol .silk-list-ol .silk-list-ol>.silk-list-item:not(.silk-list-item-nested):before{content:counter(silk-ol,lower-alpha)}.silk-list-ol .silk-list-ol .silk-list-ol .silk-list-ol>.silk-list-item:not(.silk-list-item-nested):before{content:counter(silk-ol,decimal)}.silk-list-ol .silk-list-ol .silk-list-ol .silk-list-ol .silk-list-ol>.silk-list-item:not(.silk-list-item-nested):before{content:counter(silk-ol,upper-alpha)}.silk-list-ol .silk-list-ol .silk-list-ol .silk-list-ol .silk-list-ol .silk-list-ol>.silk-list-item:not(.silk-list-item-nested):before{content:counter(silk-ol,lower-alpha)}.silk-list-ol .silk-list-ol .silk-list-ol,.silk-list-ol .silk-list-ol .silk-list-ol .silk-list-ol,.silk-list-ol .silk-list-ol .silk-list-ol .silk-list-ol .silk-list-ol,.silk-list-ol .silk-list-ol .silk-list-ol .silk-list-ol .silk-list-ol .silk-list-ol{counter-reset:silk-ol}.silk-code-block{display:block;background-color:#1e1e1e;color:#d4d4d4;font-family:SF Mono,Fira Code,Fira Mono,Menlo,Consolas,monospace;font-size:.8125em;line-height:1.6;padding:12px;margin-top:40px;margin-bottom:8px;border-radius:0;border:1px solid #333;border-top:none;overflow-x:auto;-moz-tab-size:2;tab-size:2;white-space:pre;min-height:1.6em}.silk-code-header{display:flex;align-items:center;height:32px;padding:0 8px;border:1px solid #333;border-bottom:none;background-color:#2d2d2d;border-radius:0;-webkit-user-select:none;user-select:none;z-index:1;box-sizing:border-box}.silk-code-language-select{display:flex;align-items:center;gap:4px;background:none;border:none;color:#999;font-size:12px;font-family:inherit;padding:2px 6px;border-radius:0;line-height:1}.silk-code-language-select:hover{background-color:#ffffff14;color:#ccc}.silk-code-language-chevron{font-size:10px;color:#666}.silk-code-language-dropdown{position:absolute;top:100%;left:4px;margin-top:4px;background:#2d2d2d;border:1px solid #444;border-radius:0;padding:4px;min-width:120px;z-index:10;box-shadow:0 4px 12px #0006}.silk-code-language-option{display:block;width:100%;text-align:left;background:none;border:none;color:#ccc;padding:4px 8px;border-radius:0;font-size:12px;cursor:pointer;font-family:inherit}.silk-code-language-option:hover{background:#ffffff1a}.silk-code-language-option--active{color:#fff;background:#ffffff1f}.silk-hr{border:none;margin:28px 0;padding:0;display:flex;align-items:center;gap:16px}.silk-hr:before{content:"";flex:1;height:0;border-top:1px solid #e0ded9}.silk-hr:after{content:"SECTION_START";flex-shrink:0;font-family:SF Mono,Fira Code,Fira Mono,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.08em;color:#c5c3be}.silk-image-wrapper{margin:12px 0;line-height:0}.silk-image-container{position:relative;display:inline-block;max-width:100%}.silk-image-container--selected{outline:2px solid #ac3521;outline-offset:2px}.silk-image{max-width:100%;height:auto;display:block;cursor:default}.silk-image-handle{position:absolute;width:10px;height:10px;background:#ac3521;border:1px solid #fbf9f4;z-index:2}.silk-image-handle--nw{top:-5px;left:-5px;cursor:nw-resize}.silk-image-handle--ne{top:-5px;right:-5px;cursor:ne-resize}.silk-image-handle--sw{bottom:-5px;left:-5px;cursor:sw-resize}.silk-image-handle--se{bottom:-5px;right:-5px;cursor:se-resize}.silk-note{margin:8px 0;border-left:4px solid;padding:14px 16px 14px 44px;position:relative;line-height:1.6}.silk-note:before{content:"";position:absolute;left:16px;top:16px;width:18px;height:18px;background-size:contain;background-repeat:no-repeat;background-position:center}.silk-note--info{background-color:#efeeea;border-color:#7d7870}.silk-note--info:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%237d7870'/%3E%3Ccircle cx='10' cy='6.5' r='1.5' fill='white'/%3E%3Crect x='8.5' y='9.5' width='3' height='6.5' rx='1' fill='white'/%3E%3C/svg%3E")}.silk-note--warning{background-color:#f5ebe0;border-color:#96734c}.silk-note--warning:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 22 20'%3E%3Cpolygon points='11,0.5 21.5,19.5 0.5,19.5' fill='%23a07850'/%3E%3Ctext x='11' y='16' text-anchor='middle' fill='white' font-family='Inter,sans-serif' font-weight='700' font-size='13'%3E%3F%3C/text%3E%3C/svg%3E")}.silk-note--error{background-color:#fde8e8;border-color:#c44}.silk-note--error:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23cc4444'/%3E%3Crect x='8.75' y='4' width='2.5' height='8' rx='1' fill='white'/%3E%3Ccircle cx='10' cy='14.5' r='1.5' fill='white'/%3E%3C/svg%3E")}.silk-note .silk-paragraph{margin:0}.silk-note-icon-trigger{width:24px;height:24px;background:none;border:none;border-radius:0;cursor:pointer;padding:0;opacity:0;transition:opacity .15s}.silk-note-icon-trigger:hover{background-color:#00000014;opacity:1}.silk-note-icon-dropdown{position:absolute;top:28px;left:0;background:#fff;border:1px solid #e2e2e2;border-radius:0;padding:4px;min-width:120px;z-index:10;box-shadow:0 4px 12px #0000001a}.silk-note-type-option{display:flex;align-items:center;gap:6px;width:100%;text-align:left;background:none;border:none;color:#333;padding:5px 8px;border-radius:0;font-size:12px;cursor:pointer;font-family:inherit}.silk-note-type-option:hover{background:#f0f0f0}.silk-note-type-option--active{background:#e8e8e8}.silk-note-type-option--info{color:#2563eb}.silk-note-type-option--warning{color:#a16207}.silk-note-type-option--error{color:#dc2626}.silk-slash-anchor{z-index:1000}.silk-slash-menu{background:#fff;border:1px solid #e2e2e2;border-radius:0;padding:4px;min-width:220px;max-width:300px;box-shadow:0 4px 16px #0000001f;z-index:1000;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.silk-slash-menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:6px 10px;border:none;background:none;border-radius:0;cursor:pointer;text-align:left;font-family:inherit}.silk-slash-menu-item:hover,.silk-slash-menu-item--active{background:#faf9f7}.silk-slash-menu-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:#f5f5f5;border:1px solid #eee;border-radius:0;color:#555;flex-shrink:0}.silk-slash-menu-text{display:flex;flex-direction:column;min-width:0}.silk-slash-menu-name{font-size:13px;font-weight:500;color:#1a1a1a}.silk-slash-menu-description{font-size:11px;color:#888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.silk-link{color:inherit;text-decoration:underline;text-decoration-color:#00000059;text-underline-offset:2px;text-decoration-thickness:1px;cursor:pointer;transition:text-decoration-thickness .1s,text-decoration-color .1s}.silk-link:hover{text-decoration-thickness:2px;text-decoration-color:#0009}.silk-link-dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000001f;z-index:1100;display:flex;align-items:center;justify-content:center;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.silk-link-dialog{background:#fff;border-radius:0;padding:20px;width:360px;box-shadow:0 8px 30px #00000026}.silk-link-dialog-field{margin-bottom:14px}.silk-link-dialog-label{display:block;font-size:12px;font-weight:500;color:#666;margin-bottom:5px}.silk-link-dialog-input{width:100%;padding:8px 10px;border:1px solid #e2e2e2;border-radius:0;font-size:14px;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .15s}.silk-link-dialog-input:focus{border-color:#999}.silk-link-dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.silk-link-dialog-cancel{padding:7px 14px;border:1px solid #e2e2e2;border-radius:0;background:#fff;font-size:13px;font-family:inherit;cursor:pointer;color:#333}.silk-link-dialog-cancel:hover{background:#f5f5f5}.silk-link-dialog-insert{padding:7px 14px;border:none;border-radius:0;background:#1a1a1a;color:#fff;font-size:13px;font-family:inherit;cursor:pointer}.silk-link-dialog-insert:hover{background:#333}.silk-link-dialog-input--readonly{background:#f9f9f9;color:#888}.silk-link-dialog-insert:disabled{opacity:.4;cursor:not-allowed}.silk-toolbar{display:flex;align-items:center;padding:6px 8px;gap:1px;background:#fbf9f4;border-bottom:1px solid rgba(121,124,115,.12);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-user-select:none;user-select:none}.silk-toolbar .silk-ft-color-grid,.silk-toolbar .silk-ft-font-dropdown{bottom:auto;top:100%;margin-bottom:0;margin-top:6px}.silk-floating-toolbar{position:absolute;display:flex;align-items:center;background:#fff;border:1px solid #e2e2e2;border-radius:0;padding:3px;box-shadow:0 4px 16px #0000001f;z-index:50;gap:1px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.silk-ft-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:none;border-radius:0;cursor:pointer;font-size:13px;color:#444;padding:0;flex-shrink:0}.silk-ft-btn:hover{background:#f0f0f0}.silk-ft-btn--active{background:#e8e8e8;color:#1a1a1a}.silk-ft-btn--sm{width:22px;height:22px;font-size:14px}.silk-ft-btn--sm:disabled{opacity:.3;cursor:default}.silk-ft-btn--mono{font-family:SF Mono,Fira Code,Fira Mono,Menlo,Consolas,monospace;font-size:11px}.silk-ft-sep{width:1px;height:18px;background:#e2e2e2;margin:0 3px;flex-shrink:0}.silk-ft-font-size{display:flex;align-items:center;gap:2px}.silk-ft-font-size-value{font-size:12px;color:#444;min-width:20px;text-align:center;-webkit-user-select:none;user-select:none}.silk-ft-color-wrap{position:relative}.silk-ft-btn--color{font-size:14px;font-weight:600}.silk-ft-color-indicator{border-bottom:2.5px solid;padding-bottom:1px;line-height:1}.silk-ft-color-grid{position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:6px;background:#fff;border:1px solid #e2e2e2;border-radius:0;padding:6px;display:grid;grid-template-columns:repeat(6,1fr);gap:1px;box-shadow:0 4px 16px #0000001f;z-index:10}.silk-ft-color-swatch{width:22px;height:22px;border-radius:0;border:2px solid transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;color:#999}.silk-ft-color-swatch:hover{border-color:#ccc}.silk-ft-color-swatch--active{border-color:#666}.silk-ft-font-wrap{position:relative}.silk-ft-font-dropdown{position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:6px;background:#fff;border:1px solid #e2e2e2;border-radius:0;padding:4px;min-width:160px;box-shadow:0 4px 16px #0000001f;z-index:10}.silk-ft-font-option{display:block;width:100%;text-align:left;background:none;border:none;padding:5px 8px;border-radius:0;cursor:pointer;font-size:12px;color:#444}.silk-ft-font-option:hover{background:#f0f0f0}.silk-ft-font-option--active{background:#e8e8e8;color:#1a1a1a}
|
|
1
|
+
@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap";.silk-editor-container{position:relative;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:#1a1a1a}.silk-root{position:relative;min-height:150px;outline:none;background-color:#faf9f7}.silk-content-editable{min-height:150px;outline:none;padding:8px 12px}.silk-content-editable:focus{outline:none}.silk-placeholder{position:absolute;top:8px;left:12px;color:#999;pointer-events:none;-webkit-user-select:none;user-select:none}.silk-paragraph{margin:0 0 8px;line-height:1.6}.silk-text-bold{font-weight:600}.silk-text-italic{font-style:italic}.silk-text-underline{text-decoration:underline}.silk-text-strikethrough{text-decoration:line-through}.silk-text-code{font-family:SF Mono,Fira Code,Fira Mono,Menlo,Consolas,monospace;background-color:#0000000a;border:1px solid rgba(0,0,0,.1);padding:2px 5px;border-radius:0;font-size:.875em}.silk-heading-h1{font-family:Space Grotesk,Inter,sans-serif;font-size:1.875em;font-weight:600;margin:0 0 12px;line-height:1.3;letter-spacing:-.02em}.silk-heading-h2{font-family:Space Grotesk,Inter,sans-serif;font-size:1.375em;font-weight:600;margin:0 0 10px;line-height:1.35;letter-spacing:-.01em}.silk-heading-h3{font-family:Space Grotesk,Inter,sans-serif;font-size:1.125em;font-weight:600;margin:0 0 8px;line-height:1.4}.silk-quote{margin:12px 0;padding:20px 24px;border-left:4px solid #ac3521;background-color:#f0efeb;color:#31332c;line-height:1.6}.silk-list-ul{margin:0 0 8px;padding-left:24px;list-style-type:disc}.silk-list-ol{margin:0 0 8px;padding-left:48px;list-style:none;counter-reset:silk-ol}.silk-list-item{margin:2px 0;line-height:1.6}.silk-list-ol>.silk-list-item:not(.silk-list-item-nested){counter-increment:silk-ol;position:relative;margin:14px 0}.silk-list-ol>.silk-list-item:not(.silk-list-item-nested):before{content:counter(silk-ol,decimal);position:absolute;left:-40px;color:#ac3521;font-weight:600;font-feature-settings:"tnum";width:28px;text-align:right}.silk-list-item-nested{list-style-type:none}.silk-list-ul .silk-list-ul{list-style-type:circle}.silk-list-ul .silk-list-ul .silk-list-ul{list-style-type:square}.silk-list-ol .silk-list-ol{counter-reset:silk-ol}.silk-list-ol .silk-list-ol>.silk-list-item:not(.silk-list-item-nested):before{content:counter(silk-ol,upper-alpha)}.silk-list-ol .silk-list-ol .silk-list-ol>.silk-list-item:not(.silk-list-item-nested):before{content:counter(silk-ol,lower-alpha)}.silk-list-ol .silk-list-ol .silk-list-ol .silk-list-ol>.silk-list-item:not(.silk-list-item-nested):before{content:counter(silk-ol,decimal)}.silk-list-ol .silk-list-ol .silk-list-ol .silk-list-ol .silk-list-ol>.silk-list-item:not(.silk-list-item-nested):before{content:counter(silk-ol,upper-alpha)}.silk-list-ol .silk-list-ol .silk-list-ol .silk-list-ol .silk-list-ol .silk-list-ol>.silk-list-item:not(.silk-list-item-nested):before{content:counter(silk-ol,lower-alpha)}.silk-list-ol .silk-list-ol .silk-list-ol,.silk-list-ol .silk-list-ol .silk-list-ol .silk-list-ol,.silk-list-ol .silk-list-ol .silk-list-ol .silk-list-ol .silk-list-ol,.silk-list-ol .silk-list-ol .silk-list-ol .silk-list-ol .silk-list-ol .silk-list-ol{counter-reset:silk-ol}.silk-code-block{display:block;background-color:#1e1e1e;color:#d4d4d4;font-family:SF Mono,Fira Code,Fira Mono,Menlo,Consolas,monospace;font-size:.8125em;line-height:1.6;padding:12px;margin-top:40px;margin-bottom:8px;border-radius:0;border:1px solid #333;border-top:none;overflow-x:auto;-moz-tab-size:2;tab-size:2;white-space:pre;min-height:1.6em}.silk-code-header{display:flex;align-items:center;height:32px;padding:0 8px;border:1px solid #333;border-bottom:none;background-color:#2d2d2d;border-radius:0;-webkit-user-select:none;user-select:none;z-index:1;box-sizing:border-box}.silk-code-language-select{display:flex;align-items:center;gap:4px;background:none;border:none;color:#999;font-size:12px;font-family:inherit;padding:2px 6px;border-radius:0;line-height:1}.silk-code-language-select:hover{background-color:#ffffff14;color:#ccc}.silk-code-language-chevron{font-size:10px;color:#666}.silk-code-language-dropdown{position:absolute;top:100%;left:4px;margin-top:4px;background:#2d2d2d;border:1px solid #444;border-radius:0;padding:4px;min-width:120px;z-index:10;box-shadow:0 4px 12px #0006}.silk-code-language-option{display:block;width:100%;text-align:left;background:none;border:none;color:#ccc;padding:4px 8px;border-radius:0;font-size:12px;cursor:pointer;font-family:inherit}.silk-code-language-option:hover{background:#ffffff1a}.silk-code-language-option--active{color:#fff;background:#ffffff1f}.silk-hr{height:auto;border:none;margin:28px 0;padding:0;display:flex;align-items:center;gap:16px}.silk-hr:before{content:"";flex:1;height:0;border-top:1px solid #e0ded9}.silk-hr:after{content:"SECTION_START";flex-shrink:0;font-family:SF Mono,Fira Code,Fira Mono,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.08em;color:#c5c3be}.silk-image-wrapper{margin:12px 0;line-height:0}.silk-image-container{position:relative;display:inline-block;max-width:100%}.silk-image-container--selected{outline:2px solid #ac3521;outline-offset:2px}.silk-image{max-width:100%;height:auto;display:block;cursor:default}.silk-image-handle{position:absolute;width:10px;height:10px;background:#ac3521;border:1px solid #fbf9f4;z-index:2}.silk-image-handle--nw{top:-5px;left:-5px;cursor:nw-resize}.silk-image-handle--ne{top:-5px;right:-5px;cursor:ne-resize}.silk-image-handle--sw{bottom:-5px;left:-5px;cursor:sw-resize}.silk-image-handle--se{bottom:-5px;right:-5px;cursor:se-resize}.silk-note{margin:8px 0;border-left:4px solid;padding:14px 16px 14px 44px;position:relative;line-height:1.6}.silk-note:before{content:"";position:absolute;left:16px;top:16px;width:18px;height:18px;background-size:contain;background-repeat:no-repeat;background-position:center}.silk-note--info{background-color:#efeeea;border-color:#7d7870}.silk-note--info:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%237d7870'/%3E%3Ccircle cx='10' cy='6.5' r='1.5' fill='white'/%3E%3Crect x='8.5' y='9.5' width='3' height='6.5' rx='1' fill='white'/%3E%3C/svg%3E")}.silk-note--warning{background-color:#f5ebe0;border-color:#96734c}.silk-note--warning:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 22 20'%3E%3Cpolygon points='11,0.5 21.5,19.5 0.5,19.5' fill='%23a07850'/%3E%3Ctext x='11' y='16' text-anchor='middle' fill='white' font-family='Inter,sans-serif' font-weight='700' font-size='13'%3E%3F%3C/text%3E%3C/svg%3E")}.silk-note--error{background-color:#fde8e8;border-color:#c44}.silk-note--error:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23cc4444'/%3E%3Crect x='8.75' y='4' width='2.5' height='8' rx='1' fill='white'/%3E%3Ccircle cx='10' cy='14.5' r='1.5' fill='white'/%3E%3C/svg%3E")}.silk-note .silk-paragraph{margin:0}.silk-note-icon-trigger{width:24px;height:24px;background:none;border:none;border-radius:0;cursor:pointer;padding:0;opacity:0;transition:opacity .15s}.silk-note-icon-trigger:hover{background-color:#00000014;opacity:1}.silk-note-icon-dropdown{position:absolute;top:28px;left:0;background:#fff;border:1px solid #e2e2e2;border-radius:0;padding:4px;min-width:120px;z-index:10;box-shadow:0 4px 12px #0000001a}.silk-note-type-option{display:flex;align-items:center;gap:6px;width:100%;text-align:left;background:none;border:none;color:#333;padding:5px 8px;border-radius:0;font-size:12px;cursor:pointer;font-family:inherit}.silk-note-type-option:hover{background:#f0f0f0}.silk-note-type-option--active{background:#e8e8e8}.silk-note-type-option--info{color:#2563eb}.silk-note-type-option--warning{color:#a16207}.silk-note-type-option--error{color:#dc2626}.silk-slash-anchor{z-index:1000}.silk-slash-menu{background:#fff;border:1px solid #e2e2e2;border-radius:0;padding:4px;min-width:220px;max-width:300px;box-shadow:0 4px 16px #0000001f;z-index:1000;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.silk-slash-menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:6px 10px;border:none;background:none;border-radius:0;cursor:pointer;text-align:left;font-family:inherit}.silk-slash-menu-item:hover,.silk-slash-menu-item--active{background:#faf9f7}.silk-slash-menu-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:#f5f5f5;border:1px solid #eee;border-radius:0;color:#555;flex-shrink:0}.silk-slash-menu-text{display:flex;flex-direction:column;min-width:0}.silk-slash-menu-name{font-size:13px;font-weight:500;color:#1a1a1a}.silk-slash-menu-description{font-size:11px;color:#888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.silk-link{color:inherit;text-decoration:underline;text-decoration-color:#00000059;text-underline-offset:2px;text-decoration-thickness:1px;cursor:pointer;transition:text-decoration-thickness .1s,text-decoration-color .1s}.silk-link:hover{text-decoration-thickness:2px;text-decoration-color:#0009}.silk-link-dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000001f;z-index:1100;display:flex;align-items:center;justify-content:center;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.silk-link-dialog{background:#fff;border-radius:0;padding:20px;width:360px;box-shadow:0 8px 30px #00000026}.silk-link-dialog-field{margin-bottom:14px}.silk-link-dialog-label{display:block;font-size:12px;font-weight:500;color:#666;margin-bottom:5px}.silk-link-dialog-input{width:100%;padding:8px 10px;border:1px solid #e2e2e2;border-radius:0;font-size:14px;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .15s}.silk-link-dialog-input:focus{border-color:#999}.silk-link-dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.silk-link-dialog-cancel{padding:7px 14px;border:1px solid #e2e2e2;border-radius:0;background:#fff;font-size:13px;font-family:inherit;cursor:pointer;color:#333}.silk-link-dialog-cancel:hover{background:#f5f5f5}.silk-link-dialog-insert{padding:7px 14px;border:none;border-radius:0;background:#1a1a1a;color:#fff;font-size:13px;font-family:inherit;cursor:pointer}.silk-link-dialog-insert:hover{background:#333}.silk-link-dialog-input--readonly{background:#f9f9f9;color:#888}.silk-link-dialog-insert:disabled{opacity:.4;cursor:not-allowed}.silk-toolbar{display:flex;align-items:center;padding:6px 8px;gap:1px;background:#fbf9f4;border-bottom:1px solid rgba(121,124,115,.12);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-user-select:none;user-select:none}.silk-toolbar .silk-ft-color-grid,.silk-toolbar .silk-ft-font-dropdown{bottom:auto;top:100%;margin-bottom:0;margin-top:6px}.silk-floating-toolbar{position:absolute;display:flex;align-items:center;background:#fff;border:1px solid #e2e2e2;border-radius:0;padding:3px;box-shadow:0 4px 16px #0000001f;z-index:50;gap:1px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.silk-ft-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:none;border-radius:0;cursor:pointer;font-size:13px;color:#444;padding:0;flex-shrink:0}.silk-ft-btn:hover{background:#f0f0f0}.silk-ft-btn--active{background:#e8e8e8;color:#1a1a1a}.silk-ft-btn--sm{width:22px;height:22px;font-size:14px}.silk-ft-btn--sm:disabled{opacity:.3;cursor:default}.silk-ft-btn--mono{font-family:SF Mono,Fira Code,Fira Mono,Menlo,Consolas,monospace;font-size:11px}.silk-ft-sep{width:1px;height:18px;background:#e2e2e2;margin:0 3px;flex-shrink:0}.silk-ft-font-size{display:flex;align-items:center;gap:2px}.silk-ft-font-size-value{font-size:12px;color:#444;min-width:20px;text-align:center;-webkit-user-select:none;user-select:none}.silk-ft-color-wrap{position:relative}.silk-ft-btn--color{font-size:14px;font-weight:600}.silk-ft-color-indicator{border-bottom:2.5px solid;padding-bottom:1px;line-height:1}.silk-ft-color-grid{position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:6px;background:#fff;border:1px solid #e2e2e2;border-radius:0;padding:6px;display:grid;grid-template-columns:repeat(6,1fr);gap:1px;box-shadow:0 4px 16px #0000001f;z-index:10}.silk-ft-color-swatch{width:22px;height:22px;border-radius:0;border:2px solid transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;color:#999}.silk-ft-color-swatch:hover{border-color:#ccc}.silk-ft-color-swatch--active{border-color:#666}.silk-ft-font-wrap{position:relative}.silk-ft-font-dropdown{position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:6px;background:#fff;border:1px solid #e2e2e2;border-radius:0;padding:4px;min-width:160px;box-shadow:0 4px 16px #0000001f;z-index:10}.silk-ft-font-option{display:block;width:100%;text-align:left;background:none;border:none;padding:5px 8px;border-radius:0;cursor:pointer;font-size:12px;color:#444}.silk-ft-font-option:hover{background:#f0f0f0}.silk-ft-font-option--active{background:#e8e8e8;color:#1a1a1a}
|