Add WYSIWYG & Block Editor Boilerplates

directus-labs / extensions

Experimental and community-maintained extensions for Directus

MIT License

23 stars 6 forks source link

Add WYSIWYG & Block Editor Boilerplates #39

Closed formfcw closed 2 weeks ago

formfcw commented 1 month ago

Should meet the requirements. I've added some examples of how to extend each of the editors in the README files.

formfcw commented 3 weeks ago

Build Stage Issues

I receive the following warnings when attempting to build these extensions.

Usage

Although the extensions are enabled and show under the extensions tab they do not show up in the Interface section for the respective fields

I am afraid I can’t reproduce your issues. This is what it looks like when I build the extension:

terminal

And this is what the interface selector looks like:

interface-selector

Dockerfile:

COPY directus-labs/extensions/packages/input-rich-text-html/dist ./extensions/input-rich-text-html/dist
COPY directus-labs/extensions/packages/input-rich-text-html/package.json ./extensions/input-rich-text-html

COPY directus-labs/extensions/packages/input-block-editor/dist ./extensions/input-block-editor/dist
COPY directus-labs/extensions/packages/input-block-editor/package.json ./extensions/input-block-editor

What environment are you using? Did you build the extensions before installing/adding them to the Directus container?

ComfortablyCoding commented 3 weeks ago

@formfcw

They do not show up for me, I assume due to the build issues

What environment are you using?

I am using a Mac M3, running directus via the docker-compose.yml from the docs. The extensions are located in the extensions folder.

Did you build the extensions before installing/adding them to the Directus container?

Yes, the build command is what shows those messages, they also show again when directus is started.

formfcw commented 3 weeks ago

So, I tried to reinstall everything to a new folder. So I tried to emulate your environment: While I am on a M1, I used the same docker-compose.yml from the docs, as you did. Then I copied the extensions directly from the GitHub branch into the project folder, installed their dependencies and ran the build command.

Block Editor: block-editor-build

WYSIWYG: wysiwyg-build

(Yes, there is a (different) warning, that I don’t think we can fix, at the same time it builds successfully!)

Then I ran docker compose up, opened Directus, created a new collection and added the fields and interfaces via the selector:

interface-selector

And on the item page, they just work:

interfaces

So, I don’t think that I can reproduce your issues. Can you (or someone else on your team) try to reinstall in the same way I described above?

ComfortablyCoding commented 3 weeks ago

So, I tried to reinstall everything to a new folder. So I tried to emulate your environment: While I am on a M1, I used the same docker-compose.yml from the docs, as you did. Then I copied the extensions directly from the GitHub branch into the project folder, installed their dependencies and ran the build command.

Block Editor:

WYSIWYG:

(Yes, there is a (different) warning, that I don’t think we can fix, at the same time it builds successfully!)

Then I ran docker compose up, opened Directus, created a new collection and added the fields and interfaces via the selector:

And on the item page, they just work:

So, I don’t think that I can reproduce your issues. Can you (or someone else on your team) try to reinstall in the same way I described above?

These were the steps I did as well, I will see if someone else on the team can reproduce the same issues.

formfcw commented 2 weeks ago

Re-trying (install and build) with npm works and have been informed that is acceptable so we can disregard the build issues with pnpm.

Oh, I didn’t know you were using pnpm … much ado about nothing