From 6877f9465c421c2f111daa58abfd4b93e2366883 Mon Sep 17 00:00:00 2001 From: Elias Sundqvist Date: Sat, 22 Jan 2022 23:21:57 +0100 Subject: [PATCH] Release Version 0.1.6 --- README.md | 4 +++ manifest.json | 4 +-- package.json | 2 +- src/main.tsx | 69 ++++++++++++++++++++++++++++++++++++++++++--------- versions.json | 3 ++- 5 files changed, 66 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index aa71d76..c339722 100644 --- a/README.md +++ b/README.md @@ -147,6 +147,10 @@ You can make a [pull request](https://github.com/elias-sundqvist/obsidian-react- ## Changelog +### 0.1.6 (2022-01-22) *Obsidian v0.13.19 support* +* jsx codeblocks broke in a recent obsidian update (See issue #26). With this update, they should work better again. +* Added support for embedded notes in the `Markdown` component (See issue #25). + ### 0.1.5 (2022-01-03) *Removed Debug Logging* * A lot of `console.log` calls were used when adding the live preview support. These have now been removed. diff --git a/manifest.json b/manifest.json index 1f3164a..6017288 100644 --- a/manifest.json +++ b/manifest.json @@ -1,8 +1,8 @@ { "id": "obsidian-react-components", "name": "React Components", - "version": "0.1.5", - "minAppVersion": "0.13.14", + "version": "0.1.6", + "minAppVersion": "0.13.19", "description": "This is a plugin for Obsidian. It allows you to write and use React components with Jsx inside your Obsidian notes.", "author": "Elias Sundqvist", "authorUrl": "https://github.com/elias-sundqvist", diff --git a/package.json b/package.json index 30e2fa8..5b148a1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "obsidian-react-components", - "version": "0.1.5", + "version": "0.1.6", "description": "This is a plugin for Obsidian (https://obsidian.md). It allows you to write and use React components with Jsx inside your Obsidian notes.", "main": "src/main.js", "scripts": { diff --git a/src/main.tsx b/src/main.tsx index b48dafe..84447d8 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -60,7 +60,7 @@ export default class ReactComponentsPlugin extends Plugin { }; ReactComponentContext: OfflineReact.Context; - Markdown = ({ src }: { src: string }) => { + Markdown = ({ src, maxDepth = 10 }: { src: string; maxDepth: number }) => { const React = this.React; const { useContext, useRef, useEffect } = React; const ctx = useContext(this.ReactComponentContext); @@ -73,6 +73,39 @@ export default class ReactComponentsPlugin extends Plugin { ctx.markdownPostProcessorContext.sourcePath, null ); + const patchEmbeds = (el: HTMLElement, filePath: string, depth: number) => { + if (depth > maxDepth) return; + [...el.findAll('.internal-embed')].forEach(async el => { + const src = el.getAttribute('src'); + const target = + typeof src === 'string' && this.app.metadataCache.getFirstLinkpathDest(src, filePath); + if (target instanceof TFile) { + el.innerText = ''; + switch (target.extension) { + case 'md': + el.innerHTML = `
${target.basename}
`; + const previewEl = el.getElementsByClassName('markdown-preview-view')[0] as HTMLElement; + MarkdownRenderer.renderMarkdown( + await this.app.vault.cachedRead(target), + previewEl, + target.path, + null + ); + await patchEmbeds(previewEl, target.path, depth + 1); + el.addClasses(['is-loaded']); + break; + default: + el.createEl('img', { attr: { src: this.app.vault.getResourcePath(target) } }, img => { + if (el.hasAttribute('width')) img.setAttribute('width', el.getAttribute('width')); + if (el.hasAttribute('alt')) img.setAttribute('alt', el.getAttribute('alt')); + }); + el.addClasses(['image-embed', 'is-loaded']); + break; + } + } + }); + }; + patchEmbeds(containerRef.current, ctx.markdownPostProcessorContext.sourcePath, 1); }, [ctx, src]); return ; }; @@ -542,6 +575,18 @@ export default class ReactComponentsPlugin extends Plugin { ); this.addSettingTab(new ReactComponentsSettingTab(this)); + this.registerMarkdownCodeBlockProcessor('jsx', async (source, el, ctx) => { + if ( + (ctx.containerEl.closest('.workspace-leaf-content') as HTMLElement).dataset['mode'] === 'source' && + !el.closest('.cm-line') + ) { + el.innerHTML = ''; + } else { + el.innerHTML = `
`; + el.getElementsByTagName('code')[0].innerText = source; + } + }); + try { const ext = this.getLivePostprocessor(); this.registerEditorExtension(ext); @@ -604,24 +649,18 @@ export default class ReactComponentsPlugin extends Plugin { const builder = new RangeSetBuilder(); const createJsxDecoration = (code, from, to, isBlock = false) => { const el = document.createElement('span'); - plugin.attachComponent(code, el, ctx); const deco = Decoration.widget({ widget: new JsxWidget(el, code), - block: isBlock, + block: false, //isBlock // can't register block decorations with plugins :( from, to }); - builder.add( - Math.max(0, from - 1), - to + 1, - Decoration.replace({ - from, - to - }) - ); + if (!isBlock) { + builder.add(Math.max(0, from - 1), Math.max(0, to + 1), Decoration.replace({})); + } builder.add(to + 1, to + 1, deco); }; // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -659,7 +698,8 @@ export default class ReactComponentsPlugin extends Plugin { if (!strippedCodeblockHeader) return; if ( strippedCodeblockHeader.startsWith('jsx:') || - strippedCodeblockHeader.startsWith('jsx-') + strippedCodeblockHeader.startsWith('jsx-') || + strippedCodeblockHeader == 'jsx' ) { codeblockStart = { from, to, strippedCodeblockHeader }; } @@ -672,6 +712,11 @@ export default class ReactComponentsPlugin extends Plugin { codeblockStart.strippedCodeblockHeader == 'jsx-' ) { createJsxDecoration(code, codeblockStart.from, to, true); + } else if (codeblockStart.strippedCodeblockHeader == 'jsx') { + const source = ``; + createJsxDecoration(source, codeblockStart.from, to, true); } else if (codeblockStart.strippedCodeblockHeader.startsWith('jsx::')) { const componentName = codeblockStart.strippedCodeblockHeader .substr('jsx::'.length) diff --git a/versions.json b/versions.json index dd51dee..fd226e4 100644 --- a/versions.json +++ b/versions.json @@ -13,5 +13,6 @@ "0.1.2": "0.12.19", "0.1.3": "0.13.14", "0.1.4": "0.13.14", - "0.1.5": "0.13.14" + "0.1.5": "0.13.14", + "0.1.6": "0.13.19" }