Skip to content

Commit

Permalink
feat!: markdown block is now data-entry
Browse files Browse the repository at this point in the history
  • Loading branch information
waynevanson committed Aug 29, 2023
1 parent 96adb9c commit f2ac6c0
Show file tree
Hide file tree
Showing 9 changed files with 56 additions and 106 deletions.
2 changes: 1 addition & 1 deletion .vault/Sample 01.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
```yaml-data-entry
```data-entry
datasource:
file:
path: data.md
Expand Down
2 changes: 1 addition & 1 deletion .vault/Sample 02.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
```yaml-data-entry
```data-entry
datasource:
file:
path: data.md
Expand Down
2 changes: 1 addition & 1 deletion .vault/Sample 03.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ data:
name: Shrek the best
---

```yaml-data-entry
```data-entry
datasource:
file:
frontmatter: data
Expand Down
2 changes: 1 addition & 1 deletion .vault/Sample 04.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ schema:
datasource: {}
---

```yaml-data-entry
```data-entry
datasource:
file:
schema:
Expand Down
2 changes: 1 addition & 1 deletion .vault/Sample 05.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ schema:
datasource: {}
---

```yaml-data-entry
```data-entry
datasource:
file:
schema:
Expand Down
2 changes: 1 addition & 1 deletion .vault/Sample 06.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ datasource:
name: Yo bro
---

```yaml-data-entry
```data-entry
datasource:
file:
schema:
Expand Down
6 changes: 3 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ This is a passion project used to fit my use case, but generalised enough that i
- Create your datasource (frontmatter metadata within a file)
- Create the schema that represents that datasource using [JSONSCHEMA](https://json-schema.org/specification.html).
- (Optionally) customise how the data is represented as a UI using [JSONFORMS](https://jsonforms.io/docs#how-does-it-work).
- Add a `yaml-data-entry` codeblock with the form configuration
- Add a `data-entry` codeblock with the form configuration
- Enter read mode and enjoy a form!

For recent additions to this plugin, please visit the [changelog](https://github.com/waynevanson/data-entry-obsidian-plugin/blob/main/packages/data-entry/CHANGELOG.md)
Expand All @@ -35,7 +35,7 @@ schema:
type: string
---

```yaml-data-entry
```data-entry
datasource:
file:
schema:
Expand Down Expand Up @@ -133,7 +133,7 @@ Here is some info that we can use.
## How it works

Plugin holds the state of our application.
Config is read into the plugin when a markdown file contains `yaml-data-entry`.
Config is read into the plugin when a markdown file contains `data-entry`.
We validate this config, inject some defaults and render the UI via react/preact.

We read many files frontmatter contents for the datasource, schema and uischema if we need to.
Expand Down
4 changes: 2 additions & 2 deletions packages/data-entry/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ The easiest way to install the plugin is using the `BRAT` plugin.
Here is an example entry point.

<pre>
```yaml-data-entry
```data-entry
datasource:
file: data.md
forms:
Expand Down Expand Up @@ -50,7 +50,7 @@ We are looking into ways to decrease this entry point, by making a GUI editor fo
### Quick Start

1. Go to a new file and go to source mode
2. Add code block with `yaml-data-entry` or `json-data-entry` in the format section.
2. Add code block with `data-entry` or `json-data-entry` in the format section.
3. Within the code block add:
1. Add `datasource.file` with `.md` extension on it that you would like to save the data to (ie. `path/to/my-file.md`)
2. Add your schema within `form.schema`.
Expand Down
140 changes: 45 additions & 95 deletions packages/data-entry/src/plugin.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import { flow, pipe } from 'fp-ts/lib/function';
import * as decoder from 'io-ts/Decoder';
import {
App,
Command,
MarkdownRenderChild,
Notice,
Plugin,
Expand All @@ -25,12 +24,8 @@ import { ApplicationSettings } from './settings';

type Handler = Parameters<Plugin['registerMarkdownCodeBlockProcessor']>[1];

const createJsonify = (
yaml: boolean,
): ((
string: string,
) => Either<YamlParseError | TypeError | SyntaxError, Json>) =>
either.tryCatchK(yaml ? parseYaml : JSON.parse, (error) => error as never);
const yamlfy: (string: string) => Either<YamlParseError, Json> =
either.tryCatchK(parseYaml, (error) => error as never);

const notify = (error: any) => {
new Notice(error, 0);
Expand All @@ -52,67 +47,53 @@ export class MainPlugin extends Plugin {
// todo - apply cleanup
// todo - create DIY code block processor that allows ```lang plugin-name
registerMarkdownCodeBlockProcessors() {
const yamls = ['yaml', 'yml'];
const jsons = ['json', 'jsn', 'jsonc'];
const files = yamls.concat(...jsons);
const name = 'data-entry';

files.forEach((extension) =>
this.registerMarkdownCodeBlockProcessor(
`${extension}-${name}`,
this.handleCodeBlockProcessor(extension, yamls),
),
this.registerMarkdownCodeBlockProcessor(
'data-entry',
this.handleCodeBlockProcessor,
);
}

handleCodeBlockProcessor(
extension: string,
yamls: ReadonlyArray<string>,
): Handler {
return async (source, element, context) => {
const { path } = this.app.workspace.getActiveFile()!;
console.debug({ source });

const contents = createJsonify(yamls.includes(extension))(source);
console.debug({ contents });

const settings = this.settings.settings;

const config = pipe(
contents,
either.chainW(
flow(
configuration({
datasource: {
path,
frontmatter: settings.datasource.frontmatter,
}, // todo - change to `datasource`
schema: { path, frontmatter: settings.schema.frontmatter },
uischema: { path, frontmatter: settings.uischema.frontmatter },
}).decode,
either.mapLeft(decoder.draw),
),
handleCodeBlockProcessor: Handler = async (source, element, context) => {
const { path } = this.app.workspace.getActiveFile()!;
console.debug({ source });

const settings = this.settings.settings;
console.debug({ settings });

const config = pipe(
yamlfy(source),
either.chainW(
flow(
configuration({
datasource: {
path,
frontmatter: settings.datasource.frontmatter,
}, // todo - change to `datasource`
schema: { path, frontmatter: settings.schema.frontmatter },
uischema: { path, frontmatter: settings.uischema.frontmatter },
}).decode,
either.mapLeft(decoder.draw),
),
either.getOrElseW(notify),
);

console.debug({ config });

const Component = () => (
<StrictMode>
<ThemeProvider theme={useTheme()}>
<ApplicationProvider value={{ app: this.app, config }}>
<Application />
</ApplicationProvider>
</ThemeProvider>
</StrictMode>
);

const container = element.createEl('div');
const renderer = new ReactMarkdownRenderChild(<Component />, container);
context.addChild(renderer);
};
}
),
either.getOrElseW(notify),
);

console.debug({ config });

const Component = () => (
<StrictMode>
<ThemeProvider theme={useTheme()}>
<ApplicationProvider value={{ app: this.app, config }}>
<Application />
</ApplicationProvider>
</ThemeProvider>
</StrictMode>
);

const container = element.createEl('div');
const renderer = new ReactMarkdownRenderChild(<Component />, container);
context.addChild(renderer);
};
}

class ReactMarkdownRenderChild extends MarkdownRenderChild {
Expand All @@ -134,34 +115,3 @@ class ReactMarkdownRenderChild extends MarkdownRenderChild {
this.root.unmount();
}
}

const removeCodeFence = (string: string) => {
const regex = /(?:```)(?<type>.*)\n(?<content>[^`]+)\n(?:```)/;
const groups = regex.exec(string)?.groups as
| Record<'type' | 'content', string>
| undefined;
return groups;
};

const addCodeFence = (string: string, format = '') =>
[['``` ', format, ' data-entry'].join(''), string, '```'].join('\n');

export const getCommandByName = (
app: App,
name: string,
): Command | undefined => {
//@ts-expect-error
const allCommands: Array<Command> = app.commands.listCommands();
const command = allCommands.find(
(command) =>
command.name.toUpperCase().trim() === name.toUpperCase().trim(),
);
return command;
};

export const getCommandById = (app: App, id: string): Command | undefined => {
//@ts-expect-error
const allCommands: Array<Command> = app.commands.listCommands();
const command = allCommands.find((command) => command.id === id);
return command;
};

0 comments on commit f2ac6c0

Please sign in to comment.