@haklex/rich-ext-code-snippet 0.0.1

package/dist/nodes/CodeSnippetEditNode.d.ts

@@ -0,0 +1,13 @@
+import { CodeFile, SlashMenuItemConfig } from '@haklex/rich-editor';
+import { EditorConfig, LexicalEditor, LexicalNode } from 'lexical';
+import { ReactElement } from 'react';
+import { CodeSnippetNode, SerializedCodeSnippetNode } from './CodeSnippetNode';
+export declare class CodeSnippetEditNode extends CodeSnippetNode {
+    static slashMenuItems: SlashMenuItemConfig[];
+    static clone(node: CodeSnippetEditNode): CodeSnippetEditNode;
+    static importJSON(serializedNode: SerializedCodeSnippetNode): CodeSnippetEditNode;
+    decorate(_editor: LexicalEditor, _config: EditorConfig): ReactElement;
+}
+export declare function $createCodeSnippetEditNode(files: CodeFile[]): CodeSnippetEditNode;
+export declare function $isCodeSnippetEditNode(node: LexicalNode | null | undefined): node is CodeSnippetEditNode;
+//# sourceMappingURL=CodeSnippetEditNode.d.ts.map

package/dist/nodes/CodeSnippetEditNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeSnippetEditNode.d.ts","sourceRoot":"","sources":["../../src/nodes/CodeSnippetEditNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AACxE,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAGvE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAIzC,OAAO,EACL,eAAe,EACf,KAAK,yBAAyB,EAC/B,MAAM,mBAAmB,CAAA;AAE1B,qBAAa,mBAAoB,SAAQ,eAAe;IACtD,MAAM,CAAC,cAAc,EAAE,mBAAmB,EAAE,CAiB3C;IAED,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,mBAAmB,GAAG,mBAAmB;IAI5D,MAAM,CAAC,UAAU,CACf,cAAc,EAAE,yBAAyB,GACxC,mBAAmB;IAItB,QAAQ,CAAC,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,YAAY,GAAG,YAAY;CAMtE;AAED,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,QAAQ,EAAE,GAChB,mBAAmB,CAErB;AAED,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GACnC,IAAI,IAAI,mBAAmB,CAE7B"}

package/dist/nodes/CodeSnippetNode.d.ts

@@ -0,0 +1,23 @@
+import { CodeFile } from '@haklex/rich-editor';
+import { EditorConfig, LexicalEditor, LexicalNode, NodeKey, SerializedLexicalNode, Spread, DecoratorNode } from 'lexical';
+import { ReactElement } from 'react';
+export type SerializedCodeSnippetNode = Spread<{
+    files: CodeFile[];
+}, SerializedLexicalNode>;
+export declare class CodeSnippetNode extends DecoratorNode<ReactElement> {
+    __files: CodeFile[];
+    static getType(): string;
+    static clone(node: CodeSnippetNode): CodeSnippetNode;
+    constructor(files: CodeFile[], key?: NodeKey);
+    createDOM(_config: EditorConfig): HTMLElement;
+    updateDOM(): boolean;
+    isInline(): boolean;
+    static importJSON(serializedNode: SerializedCodeSnippetNode): CodeSnippetNode;
+    exportJSON(): SerializedCodeSnippetNode;
+    getFiles(): CodeFile[];
+    setFiles(files: CodeFile[]): void;
+    decorate(_editor: LexicalEditor, _config: EditorConfig): ReactElement;
+}
+export declare function $createCodeSnippetNode(files: CodeFile[]): CodeSnippetNode;
+export declare function $isCodeSnippetNode(node: LexicalNode | null | undefined): node is CodeSnippetNode;
+//# sourceMappingURL=CodeSnippetNode.d.ts.map

package/dist/nodes/CodeSnippetNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeSnippetNode.d.ts","sourceRoot":"","sources":["../../src/nodes/CodeSnippetNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAEnD,OAAO,KAAK,EACV,YAAY,EACZ,aAAa,EACb,WAAW,EACX,OAAO,EACP,qBAAqB,EACrB,MAAM,EACP,MAAM,SAAS,CAAA;AAChB,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAIzC,MAAM,MAAM,yBAAyB,GAAG,MAAM,CAC5C;IACE,KAAK,EAAE,QAAQ,EAAE,CAAA;CAClB,EACD,qBAAqB,CACtB,CAAA;AAED,qBAAa,eAAgB,SAAQ,aAAa,CAAC,YAAY,CAAC;IAC9D,OAAO,EAAE,QAAQ,EAAE,CAAA;IAEnB,MAAM,CAAC,OAAO,IAAI,MAAM;IAIxB,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,eAAe,GAAG,eAAe;gBAIxC,KAAK,EAAE,QAAQ,EAAE,EAAE,GAAG,CAAC,EAAE,OAAO;IAK5C,SAAS,CAAC,OAAO,EAAE,YAAY,GAAG,WAAW;IAM7C,SAAS,IAAI,OAAO;IAIpB,QAAQ,IAAI,OAAO;IAInB,MAAM,CAAC,UAAU,CACf,cAAc,EAAE,yBAAyB,GACxC,eAAe;IAIlB,UAAU,IAAI,yBAAyB;IASvC,QAAQ,IAAI,QAAQ,EAAE;IAItB,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI;IAKjC,QAAQ,CAAC,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,YAAY,GAAG,YAAY;CAKtE;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,eAAe,CAEzE;AAED,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GACnC,IAAI,IAAI,eAAe,CAEzB"}

package/dist/nodes/index.d.ts

@@ -0,0 +1,7 @@
+import { CodeSnippetEditNode } from './CodeSnippetEditNode';
+import { CodeSnippetNode } from './CodeSnippetNode';
+export { CodeSnippetEditNode } from './CodeSnippetEditNode';
+export { CodeSnippetNode } from './CodeSnippetNode';
+export declare const codeSnippetNodes: (typeof CodeSnippetNode)[];
+export declare const codeSnippetEditNodes: (typeof CodeSnippetEditNode)[];
+//# sourceMappingURL=index.d.ts.map

package/dist/nodes/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/nodes/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAEnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAEnD,eAAO,MAAM,gBAAgB,4BAAoB,CAAA;AACjD,eAAO,MAAM,oBAAoB,gCAAwB,CAAA"}

package/dist/rich-ext-code-snippet.css

@@ -0,0 +1,411 @@
+.rcs-container {
+  position: relative;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  border: 1px solid var(--rc-border);
+  background: var(--rc-code-bg);
+  font-size: 0.875rem;
+}
+.rcs-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px;
+  min-height: 40px;
+}
+.rcs-tabs {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.rcs-tabs::-webkit-scrollbar {
+  display: none;
+}
+.rcs-tab {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  font-size: 0.75rem;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-weight: 500;
+  color: var(--rc-text-secondary);
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  white-space: nowrap;
+  flex-shrink: 0;
+  transition: color 0.15s, background 0.15s;
+}
+.rcs-tab:hover {
+  color: var(--rc-text);
+  background: color-mix(in srgb, var(--rc-text) 5%, transparent);
+}
+.rcs-tab-active {
+  color: var(--rc-text);
+  background: color-mix(in srgb, var(--rc-text) 8%, transparent);
+}
+.rcs-title-bar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 0;
+  font-size: 0.75rem;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-weight: 500;
+  color: var(--rc-text-secondary);
+}
+.rcs-header-actions {
+  display: flex;
+  align-items: center;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+.rcs-container:hover .rcs-header-actions {
+  opacity: 1;
+}
+.rcs-copy-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  color: var(--rc-text-secondary);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+.rcs-copy-btn:hover {
+  background: color-mix(in srgb, var(--rc-text) 8%, transparent);
+  color: var(--rc-text);
+}
+.rcs-separator {
+  height: 1px;
+  background: var(--rc-border);
+  opacity: 0.6;
+}
+.rcs-code-scroll {
+  overflow-x: auto;
+}
+.rcs-code-body {
+  padding: 12px 16px;
+  margin: 0;
+  font-size: 0.8125rem;
+  line-height: 1.7;
+  font-family: var(--font-mono, ui-monospace, monospace);
+}
+.rcs-code-body pre {
+  margin: 0;
+  background: transparent !important;
+}
+.rcs-code-body code {
+  font-family: inherit;
+}
+.rcs-editor-container pre code {
+  display: flex;
+  flex-direction: column;
+}
+.rcs-file-icon svg {
+  width: 100%;
+  height: 100%;
+}
+.rcs-edit-container {
+  position: relative;
+}
+.rcs-edit-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+}
+.rcs-edit-overlay:hover {
+  background: color-mix(in srgb, currentColor 6%, transparent);
+}
+.rcs-edit-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border-radius: 6px;
+  background: var(--rc-bg);
+  border: 1px solid var(--rc-border);
+  color: var(--rc-text);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+.rcs-edit-container:hover .rcs-edit-label {
+  opacity: 1;
+}
+.hjkryc0.hjkryc0 {
+  padding: 0;
+  gap: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  width: calc(100vw - 2rem);
+  height: min(720px, 80vh);
+  border-radius: 0.75rem;
+}
+.hjkryc0.hjkryc0[data-open] {
+  animation: none;
+}
+.hjkryc0.hjkryc0[data-closed] {
+  animation: none;
+}
+.rcs-modal {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+.rcs-modal-titlebar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 44px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--rc-border);
+  flex-shrink: 0;
+}
+.rcs-modal-title {
+  font-size: 0.75rem;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  color: var(--rc-text-secondary);
+}
+.rcs-modal-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  color: var(--rc-text-secondary);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+.rcs-modal-icon-btn:hover {
+  background: color-mix(in srgb, var(--rc-text) 8%, transparent);
+  color: var(--rc-text);
+}
+.rcs-modal-body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+.rcs-modal-sidebar {
+  width: 224px;
+  flex-shrink: 0;
+  border-right: 1px solid var(--rc-border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.rcs-sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 12px 8px;
+  font-size: 0.625rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: color-mix(in srgb, var(--rc-text-secondary) 60%, transparent);
+}
+.rcs-sidebar-add-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 4px;
+  border: none;
+  background: transparent;
+  color: var(--rc-text-secondary);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+.rcs-sidebar-add-btn:hover {
+  background: color-mix(in srgb, var(--rc-text) 8%, transparent);
+  color: var(--rc-text);
+}
+.rcs-file-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 6px 8px;
+}
+.rcs-file-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border-radius: 6px;
+  height: 24px;
+  cursor: pointer;
+  font-size: 0.75rem;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  color: var(--rc-text-secondary);
+  transition: background 0.15s, color 0.15s;
+}
+.rcs-file-drag-handle {
+  display: inline-flex;
+  align-items: center;
+  cursor: grab;
+  color: color-mix(in srgb, var(--rc-text-secondary) 40%, transparent);
+  flex-shrink: 0;
+  touch-action: none;
+}
+.rcs-file-drag-handle:active {
+  cursor: grabbing;
+}
+.rcs-file-item:hover {
+  background: color-mix(in srgb, var(--rc-text) 5%, transparent);
+  color: var(--rc-text);
+}
+.rcs-file-item-active {
+  background: color-mix(in srgb, var(--rc-text) 8%, transparent);
+  color: var(--rc-text);
+}
+.rcs-file-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rcs-file-delete {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  border: none;
+  background: transparent;
+  color: var(--rc-text-secondary);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.rcs-file-item:hover .rcs-file-delete {
+  display: inline-flex;
+}
+.rcs-file-delete:hover {
+  color: var(--rc-alert-caution);
+  background: color-mix(in srgb, var(--rc-alert-caution) 10%, transparent);
+}
+.rcs-rename-input {
+  flex: 1;
+  min-width: 0;
+  padding: 1px 4px;
+  font-size: 0.75rem;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  border-radius: 3px;
+  border: 1px solid var(--rc-border);
+  background: var(--rc-bg);
+  color: var(--rc-text);
+  outline: none;
+}
+.rcs-rename-input:focus {
+  border-color: color-mix(in srgb, var(--rc-text) 30%, transparent);
+}
+.rcs-modal-editor {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.rcs-breadcrumb {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 36px;
+  padding: 0 16px;
+  border-bottom: 1px solid color-mix(in srgb, var(--rc-border) 50%, transparent);
+  flex-shrink: 0;
+}
+.rcs-breadcrumb-left {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.75rem;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  color: var(--rc-text-secondary);
+  overflow: hidden;
+}
+.rcs-breadcrumb-name {
+  color: var(--rc-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.rcs-breadcrumb-lang {
+  opacity: 0.5;
+}
+.rcs-editor-container {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+  overflow: auto;
+  background-color: transparent !important;
+}
+.rcs-editor-container > .shikicode.output {
+  position: static !important;
+  inset: auto !important;
+}
+.rcs-editor-container .shikicode {
+  height: 100%;
+  font-size: 0.8125rem;
+  line-height: 1.7;
+}
+.rcs-editor-container .shiki, .rcs-editor-container code, .rcs-editor-container pre {
+  background: transparent !important;
+}
+.rcs-editor-container pre {
+  margin: 0 !important;
+  padding: 0 !important;
+}
+.rcs-editor-container .shikicode.output .line::before {
+  background-color: transparent !important;
+}
+.rcs-editor-container .line {
+  display: block;
+  padding: 0 1rem;
+}
+.rcs-editor-container .shikicode.input.line-numbers {
+  padding-left: calc(5em + 1rem);
+}
+.rcs-editor-container .shikicode.input:not(.line-numbers) {
+  padding-left: 1rem;
+}
+.rcs-editor-container .line > span:last-child {
+  margin-right: 1rem;
+}
+.rcs-editor-container .line::after {
+  content: ' ';
+}
+.rcs-file-item-dragging {
+  opacity: 0.4;
+}
+.rcs-drag-overlay {
+  background: var(--rc-bg-secondary);
+  border-radius: 6px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
+}
+@media (min-width: 640px) {
+  .hjkryc0.hjkryc0 {
+    max-width: 64rem;
+  }
+}

package/dist/styles.css.d.ts

@@ -0,0 +1,3 @@
+declare const _codeSnippetDialogPopup: string;
+export { _codeSnippetDialogPopup as codeSnippetDialogPopup };
+//# sourceMappingURL=styles.css.d.ts.map

package/dist/styles.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":"AAwLA,QAAA,MAAM,uBAAuB,QAAY,CAAA;AAyBzC,OAAO,EAAE,uBAAuB,IAAI,sBAAsB,EAAE,CAAA"}

package/dist/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function getLanguageFromFilename(filename: string): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAmCA,wBAAgB,uBAAuB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAGhE"}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@haklex/rich-ext-code-snippet",
+  "version": "0.0.1",
+  "description": "Multi-file code snippet extension",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/rich-ext-code-snippet.css"
+  },
+  "main": "./dist/index.mjs",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@iconify-json/material-icon-theme": "^1.2.22",
+    "@iconify/utils": "^2.3.0",
+    "lucide-react": "^0.574.0",
+    "shikicode": "*",
+    "@haklex/rich-renderer-codeblock": "0.0.1"
+  },
+  "devDependencies": {
+    "@lexical/react": "^0.39.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vanilla-extract/css": "^1.17.1",
+    "@vanilla-extract/vite-plugin": "^4.0.20",
+    "lexical": "^0.39.0",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "typescript": "^5.9.0",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.0",
+    "@haklex/rich-editor": "0.0.1",
+    "@haklex/rich-style-token": "0.0.1",
+    "@haklex/rich-editor-ui": "0.0.1"
+  },
+  "peerDependencies": {
+    "lexical": "^0.39.0",
+    "react": ">=19",
+    "@haklex/rich-editor": "0.0.1",
+    "@haklex/rich-editor-ui": "0.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev:build": "vite build --watch"
+  },
+  "types": "./dist/index.d.ts"
+}