feat: editing in preview

about: mProjectsCode#44

Author: LincZero

meta.txt

@@ -1,7 +1,18 @@
 {
 	"inputs": {
+		"src/CodeBlock.ts": {
+			"bytes": 2293,
+			"imports": [
+				{
+					"path": "obsidian",
+					"kind": "import-statement",
+					"external": true
+				}
+			],
+			"format": "esm"
+		},
 		"src/codemirror/Cm6_Util.ts": {
-			"bytes": 1334,
+			"bytes": 1392,
 			"imports": [
 				{
 					"path": "@codemirror/state",
@@ -17,7 +28,7 @@
 			"format": "esm"
 		},
 		"src/codemirror/Cm6_ViewPlugin.ts": {
-			"bytes": 8053,
+			"bytes": 8339,
 			"imports": [
 				{
 					"path": "src/main.ts",
@@ -63,12 +74,12 @@
 			"format": "esm"
 		},
 		"src/settings/Settings.ts": {
-			"bytes": 396,
+			"bytes": 413,
 			"imports": [],
 			"format": "esm"
 		},
 		"src/settings/StringSelectModal.ts": {
-			"bytes": 596,
+			"bytes": 622,
 			"imports": [
 				{
 					"path": "obsidian",
@@ -5147,7 +5158,7 @@
 			"format": "esm"
 		},
 		"src/settings/SettingsTab.ts": {
-			"bytes": 5561,
+			"bytes": 5721,
 			"imports": [
 				{
 					"path": "obsidian",
@@ -5168,7 +5179,7 @@
 			"format": "esm"
 		},
 		"src/PrismPlugin.ts": {
-			"bytes": 3493,
+			"bytes": 3615,
 			"imports": [],
 			"format": "esm"
 		},
@@ -7238,7 +7249,7 @@
 			"format": "esm"
 		},
 		"src/themes/ObsidianTheme.ts": {
-			"bytes": 17553,
+			"bytes": 18247,
 			"imports": [
 				{
 					"path": "shiki",
@@ -7249,7 +7260,7 @@
 			"format": "esm"
 		},
 		"src/themes/ThemeMapper.ts": {
-			"bytes": 3045,
+			"bytes": 3151,
 			"imports": [
 				{
 					"path": "node_modules/shiki/dist/index.mjs",
@@ -11785,7 +11796,7 @@
 			"format": "esm"
 		},
 		"src/themes/ECTheme.ts": {
-			"bytes": 5138,
+			"bytes": 5236,
 			"imports": [
 				{
 					"path": "@expressive-code/core",
@@ -11801,7 +11812,7 @@
 			"format": "esm"
 		},
 		"src/Highlighter.ts": {
-			"bytes": 8543,
+			"bytes": 8799,
 			"imports": [
 				{
 					"path": "node_modules/@expressive-code/core/dist/index.js",
@@ -11877,17 +11888,17 @@
 			"format": "esm"
 		},
 		"src/main.ts": {
-			"bytes": 5831,
+			"bytes": 8132,
 			"imports": [
 				{
 					"path": "obsidian",
 					"kind": "import-statement",
 					"external": true
 				},
 				{
-					"path": "src/CodeBlock",
+					"path": "src/CodeBlock.ts",
 					"kind": "import-statement",
-					"external": true
+					"original": "src/CodeBlock"
 				},
 				{
 					"path": "src/codemirror/Cm6_ViewPlugin.ts",
@@ -11931,6 +11942,11 @@
 	"outputs": {
 		"main.js": {
 			"imports": [
+				{
+					"path": "obsidian",
+					"kind": "require-call",
+					"external": true
+				},
 				{
 					"path": "obsidian",
 					"kind": "require-call",
@@ -13954,7 +13970,10 @@
 					"bytesInOutput": 100
 				},
 				"src/main.ts": {
-					"bytesInOutput": 2677
+					"bytesInOutput": 3745
+				},
+				"src/CodeBlock.ts": {
+					"bytesInOutput": 986
 				},
 				"src/codemirror/Cm6_ViewPlugin.ts": {
 					"bytesInOutput": 2708
@@ -14221,7 +14240,7 @@
 					"bytesInOutput": 32
 				},
 				"node_modules/hast-util-select/lib/pseudo.js": {
-					"bytesInOutput": 3796
+					"bytesInOutput": 3800
 				},
 				"node_modules/hast-util-select/lib/test.js": {
 					"bytesInOutput": 388
@@ -14335,7 +14354,7 @@
 					"bytesInOutput": 4584
 				}
 			},
-			"bytes": 19041508
+			"bytes": 19043566
 		}
 	}
 }

src/main.ts

@@ -111,23 +111,60 @@ export default class ShikiPlugin extends Plugin {
 							}
 						}
 
-						const html:string = await codeToHtml(source, {
-							lang: language,
-							theme: this.settings.theme,
-							transformers: [
-								transformerNotationDiff(), 
-								transformerNotationDiff({ matchAlgorithm: 'v3' }),
-								transformerNotationHighlight(),
-								transformerNotationFocus(),
-								transformerNotationErrorLevel(),
-								transformerMetaHighlight(),
-							],
-						})
-						el.innerHTML = html
-
-						// const codeBlock = new CodeBlock(this, el, source, language, ctx);
-
-						// ctx.addChild(codeBlock);
+						let option: 'pre'|'old'|'area' = 'pre' // TODO as a new setting option
+						
+						// @ts-ignore
+						if (option === 'area') {
+							// - div
+							//   - span
+							//     - pre
+							// - textarea
+							const div = document.createElement('div'); el.appendChild(div); div.classList.add('obsidian-shiki-plugin')
+							div.setAttribute('relative', ''); div.setAttribute('min-h-100', ''); div.setAttribute('float-left', ''); div.setAttribute('min-w-full', ''); 
+							const span = document.createElement('span'); div.appendChild(span);
+							const textarea = document.createElement('textarea'); div.appendChild(textarea); textarea.classList.add('line-height-$vp-code-line-height', 'font-$vp-font-family-mono', 'text-size-$vp-code-font-size');
+							// 这些属性很奇怪，我抄了shiki.style上的属性。但支撑这些的，是许多类似 `[absolute=""]` 这样选择器的css
+							// 也许是为了方便样式覆盖
+							const attributes = {
+								'whitespace-pre': '',
+								'overflow-auto': '',
+								'w-full': '',
+								'h-full': '',
+								'font-mono': '',
+								'bg-transparent': '',
+								'absolute': '',
+								'inset-0': '',
+								'py-20px': '',
+								'px-24px': '',
+								'text-transparent': '',
+								'carent-gray': '',
+								'tab-4': '',
+								'resize-none': '',
+								'z-10': '',
+								'autocomplete': 'off',
+								'autocorrect': 'off',
+								'autocapitalize': 'none',
+								'spellcheck': 'false',
+							};
+							Object.entries(attributes).forEach(([key, val]) => {
+								textarea.setAttribute(key, val);
+							});
+							// async part
+							this.getPre(language, source).then(pre => span.innerHTML = pre);
+							textarea.value = source;
+							textarea.oninput = (ev) => {
+								const newValue = (ev.target as HTMLTextAreaElement).value
+								this.getPre(language, newValue).then(pre => span.innerHTML = pre);
+							}
+						}
+						// @ts-ignore
+						else if (option === 'pre') {
+							this.getPre(language, source).then(pre => el.innerHTML = pre);
+						}
+						else {
+							const codeBlock = new CodeBlock(this, el, source, language, ctx);
+							ctx.addChild(codeBlock);
+						}
 					},
 					1000,
 				);
@@ -137,6 +174,22 @@ export default class ShikiPlugin extends Plugin {
 		}
 	}
 
+	async getPre(language:string, source:string): Promise<string> {
+		const pre:string = await codeToHtml(source, {
+			lang: language,
+			theme: this.settings.theme,
+			transformers: [
+				transformerNotationDiff(), 
+				transformerNotationDiff({ matchAlgorithm: 'v3' }),
+				transformerNotationHighlight(),
+				transformerNotationFocus(),
+				transformerNotationErrorLevel(),
+				transformerMetaHighlight(),
+			],
+		})
+		return pre
+	}
+
 	registerInlineCodeProcessor(): void {
 		this.registerMarkdownPostProcessor(async (el, ctx) => {
 			const inlineCodes = el.findAll(':not(pre) > code');

styles.css

@@ -289,3 +289,32 @@ code>span.line.highlighted.warning {
 code>span.line {
 	line-height: 24px;
 }
+
+/* shiki attr style */
+[absolute=""] { position: absolute; }
+[relative=""] { position: relative; }
+[min-w-full=""] { min-width: 100%; }
+[min-h-100=""] { min-height: 25rem; }
+[w-full=""] { width: 100%; }
+[h-full=""] { height: 100%; }
+[float-left=""] { float: left; }
+[overflow-auto=""] { overflow: auto; }
+[bg-transparent=""] { background-color: transparent; }
+/* [text-transparent=""] { color: transparent; } */
+[text-transparent=""] { color: #ffffff33; }
+[inset-0=""] { top: 0; right: 0; bottom: 0; left: 0; }
+[py-20px=""] { padding-top: 20px; padding-bottom: 20px; }
+[px-24px=""] { padding-top: 24px; padding-bottom: 24px; }
+[resize-none=""] { resize: none; }
+[z-10=""] { z-index: 10; }
+[tab-4=""] {}
+[carent-gray=""] {}
+[font-mono=""] {}
+
+/* keep same: pre & textare */
+.obsidian-shiki-plugin code, .obsidian-shiki-plugin textarea {
+  line-height: 24px;
+  padding: 12px 16px;
+  margin: 0;
+  border: 0;
+}