Skip to content

Commit

Permalink
Release Version 0.1.6
Browse files Browse the repository at this point in the history
  • Loading branch information
Elias Sundqvist committed Jan 22, 2022
1 parent 1201be8 commit 6877f94
Show file tree
Hide file tree
Showing 5 changed files with 66 additions and 16 deletions.
4 changes: 4 additions & 0 deletions README.md
View file
Expand Up @@ -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.

Expand Down
4 changes: 2 additions & 2 deletions manifest.json
View file
@@ -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",
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
@@ -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": {
Expand Down
69 changes: 57 additions & 12 deletions src/main.tsx
View file
Expand Up @@ -60,7 +60,7 @@ export default class ReactComponentsPlugin extends Plugin {
};

ReactComponentContext: OfflineReact.Context<ReactComponentContextData>;
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);
Expand All @@ -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 = `<div class="markdown-embed"><div class="markdown-embed-title">${target.basename}</div><div class="markdown-embed-content node-insert-event markdown-embed-page"><div class="markdown-preview-view"></div></div><div class="markdown-embed-link" aria-label="Open link"><svg viewBox="0 0 100 100" class="link" width="20" height="20"><path fill="currentColor" stroke="currentColor" d="M74,8c-4.8,0-9.3,1.9-12.7,5.3l-10,10c-2.9,2.9-4.7,6.6-5.1,10.6C46,34.6,46,35.3,46,36c0,2.7,0.6,5.4,1.8,7.8l3.1-3.1 C50.3,39.2,50,37.6,50,36c0-3.7,1.5-7.3,4.1-9.9l10-10c2.6-2.6,6.2-4.1,9.9-4.1s7.3,1.5,9.9,4.1c2.6,2.6,4.1,6.2,4.1,9.9 s-1.5,7.3-4.1,9.9l-10,10C71.3,48.5,67.7,50,64,50c-1.6,0-3.2-0.3-4.7-0.8l-3.1,3.1c2.4,1.1,5,1.8,7.8,1.8c4.8,0,9.3-1.9,12.7-5.3 l10-10C90.1,35.3,92,30.8,92,26s-1.9-9.3-5.3-12.7C83.3,9.9,78.8,8,74,8L74,8z M62,36c-0.5,0-1,0.2-1.4,0.6l-24,24 c-0.5,0.5-0.7,1.2-0.6,1.9c0.2,0.7,0.7,1.2,1.4,1.4c0.7,0.2,1.4,0,1.9-0.6l24-24c0.6-0.6,0.8-1.5,0.4-2.2C63.5,36.4,62.8,36,62,36 z M36,46c-4.8,0-9.3,1.9-12.7,5.3l-10,10c-3.1,3.1-5,7.2-5.2,11.6c0,0.4,0,0.8,0,1.2c0,4.8,1.9,9.3,5.3,12.7 C16.7,90.1,21.2,92,26,92s9.3-1.9,12.7-5.3l10-10C52.1,73.3,54,68.8,54,64c0-2.7-0.6-5.4-1.8-7.8l-3.1,3.1 c0.5,1.5,0.8,3.1,0.8,4.7c0,3.7-1.5,7.3-4.1,9.9l-10,10C33.3,86.5,29.7,88,26,88s-7.3-1.5-9.9-4.1S12,77.7,12,74 c0-3.7,1.5-7.3,4.1-9.9l10-10c2.6-2.6,6.2-4.1,9.9-4.1c1.6,0,3.2,0.3,4.7,0.8l3.1-3.1C41.4,46.6,38.7,46,36,46L36,46z"></path></svg></div></div>`;
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 <span ref={containerRef}></span>;
};
Expand Down Expand Up @@ -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 = `<pre class="language-jsx" tabindex="0"><code class="language-jsx"></code><button class="copy-code-button">Copy</button></pre>`;
el.getElementsByTagName('code')[0].innerText = source;
}
});

try {
const ext = this.getLivePostprocessor();
this.registerEditorExtension(ext);
Expand Down Expand Up @@ -604,24 +649,18 @@ export default class ReactComponentsPlugin extends Plugin {
const builder = new RangeSetBuilder<Decoration>();
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
Expand Down Expand Up @@ -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 };
}
Expand All @@ -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 = `<Markdown src={${JSON.stringify(
'```jsx\n' + code + '\n```'
)}}/>`;
createJsxDecoration(source, codeblockStart.from, to, true);
} else if (codeblockStart.strippedCodeblockHeader.startsWith('jsx::')) {
const componentName = codeblockStart.strippedCodeblockHeader
.substr('jsx::'.length)
Expand Down
3 changes: 2 additions & 1 deletion versions.json
View file
Expand Up @@ -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"
}

0 comments on commit 6877f94

Please sign in to comment.