Skip to content

Commit

Permalink
Fix serializers for media plugins
Browse files Browse the repository at this point in the history
  • Loading branch information
@Darginec05
Darginec05 committed Jul 27, 2024
1 parent 8f3fead commit a594224
Show file tree
Hide file tree
Showing 6 changed files with 85 additions and 24 deletions.
6 changes: 0 additions & 6 deletions packages/core/editor/src/parsers/deserializeHTML.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,6 @@ const MARKS_NODE_NAME_MATCHERS_MAP = {
EM: { type: 'italic' },
};

const JUSTIFY_TO_ALIGNS = {
'flex-start': 'left',
center: 'center',
'flex-end': 'right',
};

type PluginsMapByNode = {
type: string;
parse: PluginDeserializeParser['parse'];
Expand Down
62 changes: 54 additions & 8 deletions packages/development/src/pages/dev/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ const BasicExample = () => {
id: '124268a3-ea74-4e8c-992f-67c6373285de',
type: 'Callout',
meta: {
order: 1,
order: 3,
depth: 0,
align: 'center',
},
Expand All @@ -76,7 +76,7 @@ const BasicExample = () => {
id: '174ac0e2-ced5-4696-b281-efc2c32d7766',
type: 'Paragraph',
meta: {
order: 2,
order: 4,
depth: 0,
align: 'center',
},
Expand Down Expand Up @@ -114,7 +114,7 @@ const BasicExample = () => {
],
type: 'BulletedList',
meta: {
order: 3,
order: 5,
depth: 0,
},
},
Expand Down Expand Up @@ -144,7 +144,7 @@ const BasicExample = () => {
],
type: 'Image',
meta: {
order: 4,
order: 6,
depth: 0,
},
},
Expand Down Expand Up @@ -175,7 +175,7 @@ const BasicExample = () => {
],
type: 'Embed',
meta: {
order: 5,
order: 7,
depth: 0,
align: 'right',
},
Expand Down Expand Up @@ -215,7 +215,7 @@ const BasicExample = () => {
],
type: 'Video',
meta: {
order: 6,
order: 8,
depth: 0,
align: 'left',
},
Expand All @@ -242,7 +242,7 @@ const BasicExample = () => {
],
type: 'File',
meta: {
order: 7,
order: 9,
depth: 0,
},
},
Expand All @@ -264,7 +264,53 @@ const BasicExample = () => {
],
type: 'Paragraph',
meta: {
order: 8,
order: 10,
depth: 0,
},
},
'c4f4d5ca-6ea0-46b9-9b62-bbfca4ffa687': {
id: 'c4f4d5ca-6ea0-46b9-9b62-bbfca4ffa687',
value: [
{
id: 'ce9480b7-3a45-4fd8-b792-00c0df0a985e',
type: 'paragraph',
children: [
{
text: '',
},
],
props: {
nodeType: 'block',
},
},
],
type: 'Paragraph',
meta: {
order: 1,
depth: 0,
},
},
'2500180a-2795-4600-848f-c5dfd3643023': {
id: '2500180a-2795-4600-848f-c5dfd3643023',
value: [
{
id: '6aa5696a-5a8b-49fd-b45d-1414dd6b3c68',
type: 'code',
props: {
nodeType: 'void',
language: 'javascript',
theme: 'VSCode',
},
children: [
{
text: "import { generateId, SlateElement, YooptaPlugin } from '@yoopta/editor';\nimport { ImageElementProps, ImagePluginElements, ImagePluginOptions } from '../types';\nimport { ImageRender } from '../ui/Image';\n\nconst ALIGNS_TO_JUSTIFY = {\n left: 'flex-start',\n center: 'center',\n right: 'flex-end',\n};\n\n// [TODO] - caption element??,\nconst Image = new YooptaPlugin<ImagePluginElements, ImageElementProps, ImagePluginOptions>({\n type: 'Image',\n elements: {\n image: {\n render: ImageRender,\n props: {\n src: null,\n alt: null,\n srcSet: null,\n bgColor: null,\n fit: 'contain',\n sizes: { width: 650, height: 500 },\n nodeType: 'void',\n },\n },\n },\n options: {\n display: {\n title: 'Image',\n description: 'Upload from device or embed with link',\n },\n onUpload: () => Promise.resolve({ src: null, alt: null }),\n accept: 'image/png, image/jpeg, image/gif, image/webp',\n maxSizes: { maxWidth: 650, maxHeight: 550 },\n },\n parsers: {\n html: {\n deserialize: {\n nodeNames: ['IMG'],\n parse: (el) => {\n if (el.nodeName === 'IMG') {\n const props: SlateElement<'image', ImageElementProps>['props'] = {\n nodeType: 'void',\n src: el.getAttribute('src') || '',\n alt: el.getAttribute('alt') || '',\n srcSet: el.getAttribute('srcset') || '',\n fit: (el.getAttribute('objectFit') || 'contain') as ImageElementProps['fit'],\n sizes: {\n width: el.getAttribute('width') ? parseInt(el.getAttribute('width') || '650', 10) : 650,\n height: el.getAttribute('height') ? parseInt(el.getAttribute('height') || '500', 10) : 500,\n },\n };\n\n const node: SlateElement = {\n id: generateId(),\n type: 'image',\n children: [{ text: '' }],\n props,\n };\n\n return node;\n }\n },\n },\n serialize: (element, text, blockMeta) => {\n const { align = 'center', depth = 0 } = blockMeta || {};\n const justify = ALIGNS_TO_JUSTIFY[align] || 'center';\n\n return `<div style=\"margin-left: ${depth}px; display: flex; width: 100%; justify-content: ${justify}\">\n <img data-meta-align=\"${align}\" data-meta-depth=\"${depth}\" src=\"${element.props.src}\" alt=\"${element.props.alt}\" width=\"${element.props.sizes.width}\" height=\"${element.props.sizes.height}\" objectFit=\"${element.props.fit}\" />\n </div>`;\n },\n },\n markdown: {\n serialize: (element, text) => {\n return `![${element.props.alt}](${element.props.src})\\n`;\n },\n },\n },\n});\n\nexport { Image };\n",
},
],
},
],
type: 'Code',
meta: {
order: 2,
depth: 0,
},
},
Expand Down
15 changes: 12 additions & 3 deletions packages/plugins/code/src/plugin/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@ import { generateId, YooptaPlugin } from '@yoopta/editor';
import { CodeElementProps, CodePluginBlockOptions, CodePluginElements } from '../types';
import { CodeEditor } from '../ui/Code';

const ALIGNS_TO_JUSTIFY = {
left: 'flex-start',
center: 'center',
right: 'flex-end',
};

const Code = new YooptaPlugin<CodePluginElements, CodeElementProps, CodePluginBlockOptions>({
type: 'Code',
customEditor: CodeEditor,
Expand All @@ -28,7 +34,7 @@ const Code = new YooptaPlugin<CodePluginElements, CodeElementProps, CodePluginBl
html: {
deserialize: {
nodeNames: ['PRE'],
parse(el) {
parse: (el) => {
if (el.nodeName === 'PRE') {
const code = el.querySelector('code');
const textContent = code ? code.textContent : el.textContent;
Expand All @@ -46,8 +52,11 @@ const Code = new YooptaPlugin<CodePluginElements, CodeElementProps, CodePluginBl
}
},
},
serialize: (element, text) => {
return `<pre style="background-color: #263238; color: #fff; padding: 20px 24px; white-space: pre-line;"><code>${`${text}`}</code></pre>`;
serialize: (element, text, blockMeta) => {
const { align = 'left', depth = 0 } = blockMeta || {};
const justify = ALIGNS_TO_JUSTIFY[align] || 'left';

return `<pre data-meta-align="${align}" data-meta-depth="${depth}" style="margin-left: ${depth}px; display: flex; width: 100%; justify-content: "${justify}"; background-color: #263238; color: #fff; padding: 20px 24px; white-space: pre-line;"><code>${text}</code></pre>`.toString();
},
},
markdown: {
Expand Down
4 changes: 2 additions & 2 deletions packages/plugins/file/src/plugin/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@ const File = new YooptaPlugin<FilePluginElements, FileElementProps, FilePluginOp
parsers: {
html: {
serialize: (element, text, blockMeta) => {
const { align = 'center', depth = 0 } = blockMeta || {};
const justify = ALIGNS_TO_JUSTIFY[align] || 'center';
const { align = 'left', depth = 0 } = blockMeta || {};
const justify = ALIGNS_TO_JUSTIFY[align] || 'left';

return `<div style="margin-left: ${depth}px; display: flex; width: 100%; justify-content: ${justify}"><a data-meta-align="${align}" data-meta-depth="${depth}" href="${
element.props.src
Expand Down
4 changes: 2 additions & 2 deletions packages/plugins/image/src/plugin/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,8 @@ const Image = new YooptaPlugin<ImagePluginElements, ImageElementProps, ImagePlug
const { align = 'center', depth = 0 } = blockMeta || {};
const justify = ALIGNS_TO_JUSTIFY[align] || 'center';

return `<div style="margin-left: ${depth}px; display: flex; width: 100%; justify-content: ${justify}">
<img data-meta-align="${align}" data-meta-depth="${depth}" src="${element.props.src}" alt="${element.props.alt}" width="${element.props.sizes.width}" height="${element.props.sizes.height}" objectFit="${element.props.fit}" />
return `<div style="margin-left: ${depth}px; display: flex; width: 100%; justify-content: "${justify}"">
<img data-meta-align="${align}" data-meta-depth="${depth}" src="${element.props.src}" alt="${element.props.alt}" width="${element.props.sizes.width}" height="${element.props.sizes.height}" objectFit="${element.props.fit}"></img>
</div>`;
},
},
Expand Down
18 changes: 15 additions & 3 deletions packages/plugins/video/src/plugin/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@ import { generateId, YooptaPlugin } from '@yoopta/editor';
import { VideoElementProps, VideoPluginElements, VideoPluginOptions } from '../types';
import { VideoRender } from '../ui/Video';

const ALIGNS_TO_JUSTIFY = {
left: 'flex-start',
center: 'center',
right: 'flex-end',
};

const Video = new YooptaPlugin<VideoPluginElements, VideoElementProps, VideoPluginOptions>({
type: 'Video',
elements: {
Expand All @@ -14,6 +20,7 @@ const Video = new YooptaPlugin<VideoPluginElements, VideoElementProps, VideoPlug
bgColor: null,
sizes: { width: 650, height: 400 },
nodeType: 'void',
fit: 'cover',
provider: {
type: null,
id: '',
Expand Down Expand Up @@ -50,12 +57,14 @@ const Video = new YooptaPlugin<VideoPluginElements, VideoElementProps, VideoPlug
const loop = el.getAttribute('loop');
const muted = el.getAttribute('muted');
const autoPlay = el.getAttribute('autoplay');
const fit = el.getAttribute('objectFit') || 'cover';

const props = {
src,
srcSet,
bgColor,
sizes,
fit,
settings: {
controls: !!controls,
loop: !!loop,
Expand Down Expand Up @@ -96,10 +105,13 @@ const Video = new YooptaPlugin<VideoPluginElements, VideoElementProps, VideoPlug
// }
},
},
serialize: (element, text) => {
serialize: (element, text, blockMeta) => {
const { align = 'center', depth = 0 } = blockMeta || {};
const justify = ALIGNS_TO_JUSTIFY[align] || 'center';

return `
<div style="display: flex; width: 100%; justify-content: center">
<video src="${element.props.src}" width="${element.props.sizes.width}" height="${element.props.sizes.height}" controls="${element.props.settings.controls}" loop="${element.props.settings.loop}" muted="${element.props.settings.muted}" autoplay="${element.props.settings.autoPlay}" style="margin: 0 auto;" />
<div style="margin-left: ${depth}px; display: flex; width: 100%; justify-content: "${justify}"">
<video data-meta-align="${align}" data-meta-depth="${depth}" src="${element.props.src}" width="${element.props.sizes.width}" height="${element.props.sizes.height}" controls="${element.props.settings.controls}" loop="${element.props.settings.loop}" muted="${element.props.settings.muted}" autoplay="${element.props.settings.autoPlay}" style="margin: 0 auto;" objectFit="${element.props.fit}" />
</div>`;
},
},
Expand Down

0 comments on commit a594224

Please sign in to comment.