drupal-visual-editor
v0.2.0
Published
Provide delightful editorial experiences for content editors using Drupal regardless of your FE implementation.
Downloads
2,395
Readme
Drupal Visual Editor
Provide delightful editorial experiences for content editors within Drupal regardless of your FE implementation.
Usage with Remix
Adding your VisualEditorComponentContainer component
Create a file at app/components/helpers/VisualEditorComponentContainer.tsx
and paste this content:
import type { VisualEditorComponentProps } from "drupal-visual-editor"
import { openVisualEditorComponent } from "drupal-visual-editor"
interface VisualEditorComponentContainerProps extends VisualEditorComponentProps {
children?: React.ReactNode;
}
export default function VisualEditorComponentContainer(
{ action, storage, uuid, children }: VisualEditorComponentContainerProps
) {
return (
// eslint-disable-next-line
<section
id={`${storage}-${uuid}`}
data-visual-editor-component={`${storage}-${uuid}`}
onClick={() => openVisualEditorComponent({
action,
storage,
uuid,
})}
>
{children}
</section>
)
}
Using the new created React VisualEditorComponentContainer Component
At your component resolver file import the VisualEditorComponentContainer
import VisualEditorComponentContainer from "~/components/helpers/VisualEditorComponentContainer";
Wrap your component using the imported VisualEditorComponentContainer
component
// Wrap standard ParagraphComponent using VisualEditorComponentContainer wrapper
if (environment === 'preview') {
<VisualEditorComponentContainer
action='edit'
storage='paragraph'
uuid={paragraph.id}
>
{ParagraphComponent}
</VisualEditorComponentContainer>
}
Addign styles to component container
Create a file at app/preview.css
and paste this content:
[data-visual-editor-component]:hover {
border-color: purple; border-style: dashed;
border-width: thin;
overflow: hidden;
cursor: pointer;
}
Import your recently created app/preview.css
file at app/root.tsx
import './preview.css'
For a fully functional example visit any of those repositories:
Supporting organizations
Development sponsored by Octahedroid