fix: embeds and images save better #893

jennspencer · 2024-05-30T03:12:13Z

	Fix RM-XYZ

🧰 Changes

embeds and images had a few kinks still, and they've been worked out? mostly? (🤞🏻)

🧬 QA & Testing

jennspencer · 2024-05-30T03:12:38Z

Makefile

+	echo "${NODE_ENV}" > public/data/build-env && \
+	npx ts-node ./bin/print-webpack-config.ts > ./build-time-webpack-config.json && \
+	npm run ui
+


jennspencer · 2024-05-30T03:13:33Z

processor/transform/readme-components.ts

+    //     url,
+    //   };
+
+    //   parent.children[index] = mdNode;


@kellyjosephprice i commented out some of your image stuff because it was gettin' rull weird with my changes and i figured we could work it out later

I think this means 'complexImages' won't render as the image widget in the editor, right?

Same for embeds, I think we need to convert them from JSX to mdast/slate-y type nodes for the editor to pick them up.

it works in the editor playground, but i haven't checked in a project yet (doing so now)

If you change the playground source to:

<Image align="center" className="border" url="https://drastik.ch/wp-content/uploads/2023/06/blackcat.gif" />

does it load as a widget or as JSX?

in the playground, yeah

but in the dash editor not so much, goddammit

OH I think it's falling through to here:

markdown/processor/transform/readme-components.ts

Lines 97 to 111 in ef1c17b

const hProperties = attributes(node);

// @ts-ignore

const mdNode: CodeTabs = {

children: node.children as any,

type: types[node.name],

...(['tr', 'td'].includes(node.name)

? {}

: {

data: {

hName: node.name,

...(Object.keys(hProperties).length ? { hProperties } : {}),

},

}),

position: node.position,

I think we should add embeds to this map:

markdown/processor/transform/readme-components.ts

Lines 9 to 19 in ef1c17b

const types = {

Callout: NodeTypes['callout'],

Code: 'code',

CodeTabs: NodeTypes['codeTabs'],

Glossary: NodeTypes['glossary'],

Image: 'image',

Table: 'table',

Variable: NodeTypes['variable'],

td: 'tableCell',

tr: 'tableRow',

};

And then they'll get picked up in the editor?

processor/transform/images.ts

types.d.ts

kellyjosephprice · 2024-05-30T17:23:58Z

processor/transform/readme-components.ts

+    //     url,
+    //   };
+
+    //   parent.children[index] = mdNode;


I think this means 'complexImages' won't render as the image widget in the editor, right?

kellyjosephprice · 2024-05-30T17:24:47Z

processor/transform/readme-components.ts

+    //     url,
+    //   };
+
+    //   parent.children[index] = mdNode;


Same for embeds, I think we need to convert them from JSX to mdast/slate-y type nodes for the editor to pick them up.

processor/compile/image.ts

kellyjosephprice · 2024-06-07T16:29:26Z

processor/utils.ts

+    return memo;
+  }, {} as T);
+
+export const isMDXElement = (node: Node): node is MdxJsxFlowElement | MdxJsxTextElement => {


👍🏼 👍🏼

lib/run.tsx

kellyjosephprice

Still reviewing, but the only thing I'm seeing in the app is that the compilers aren't adding newlines?

processor/compile/embed.ts

processor/compile/image.ts

jennspencer · 2024-06-12T17:22:59Z

this still needs some cleanup, but i'd like to get this merged ASAP for QA purposes!

… fix/embeds-images

kellyjosephprice

Seems reasonable to me.

kellyjosephprice · 2024-06-12T17:48:38Z

__tests__/html-block-parser.test.js

@@ -1,6 +1,6 @@
 import { mdast } from '../index';

-describe.skip('Parse html block', () => {
+describe('Parse html block', () => {


kellyjosephprice · 2024-06-12T17:49:06Z

enums.ts

@@ -1,12 +1,12 @@
 export enum NodeTypes {
  callout = 'rdme-callout',
  codeTabs = 'code-tabs',
-  embed = 'embed',
+  embedBlock = 'embed-block',


Is there a regular embed block still?

ahh, no. i changed the structure enough that the serializing/deserializing was getting to be spaghetti with the current/old embed block, so i just moved it all wholesale to a new block/block type

it also allows me more freedom to dial in the new image and embed blocks, haha

processor/transform/embeds.ts

## Version 6.75.0-beta.53 ### 🛠 Fixes & Updates * embeds and images save better ([#893](#893)) ([67e0fec](67e0fec))

rafegoldberg · 2024-06-12T18:21:19Z

This PR was released!

🚀 Changes included in v6.75.0-beta.53

fix many things

3f7f9c1

jennspencer requested review from kellyjosephprice and trishaprile May 30, 2024 03:12

jennspencer commented May 30, 2024

View reviewed changes

kellyjosephprice reviewed May 30, 2024

View reviewed changes

use path variable for haxx

5371d1d

kellyjosephprice reviewed May 30, 2024

View reviewed changes

processor/compile/image.ts Outdated Show resolved Hide resolved

jennspencer added 5 commits May 30, 2024 11:16

typo

ef1c17b

fix: stuff

394ebbc

Merge branch 'beta' into fix/embeds-images

d4b0ff2

fixes

048716f

Merge branch 'beta' into fix/embeds-images

fe91aea

kellyjosephprice reviewed Jun 7, 2024

View reviewed changes

fix: image/embed processing

358741b

jennspencer commented Jun 7, 2024

View reviewed changes

lib/run.tsx Outdated Show resolved Hide resolved

kellyjosephprice requested changes Jun 7, 2024

View reviewed changes

processor/compile/embed.ts Show resolved Hide resolved

processor/compile/embed.ts Outdated Show resolved Hide resolved

processor/compile/image.ts Outdated Show resolved Hide resolved

image blocks & embed blocks

ab7f718

jennspencer requested a review from kellyjosephprice June 12, 2024 17:19

Merge branch 'beta' into fix/embeds-images

89afef1

jennspencer added 3 commits June 12, 2024 10:30

snaps

ec3f201

Merge branch 'beta' into fix/embeds-images

c3442d8

Merge branch 'fix/embeds-images' of github.com:readmeio/markdown into…

b00921a

… fix/embeds-images

kellyjosephprice approved these changes Jun 12, 2024

View reviewed changes

oops

fa0a549

jennspencer commented Jun 12, 2024

View reviewed changes

processor/transform/embeds.ts Outdated Show resolved Hide resolved

Update processor/transform/embeds.ts

05c182b

jennspencer merged commit 67e0fec into beta Jun 12, 2024

jennspencer deleted the fix/embeds-images branch June 12, 2024 18:18

rafegoldberg pushed a commit that referenced this pull request Jun 12, 2024

build(release): 🚀 v6.75.0-beta.53 🦉

ba4499d

## Version 6.75.0-beta.53 ### 🛠 Fixes & Updates * embeds and images save better ([#893](#893)) ([67e0fec](67e0fec))

rafegoldberg added the released on @beta label Jun 12, 2024

kellyjosephprice mentioned this pull request Jul 9, 2024

chore: profiling #936

Closed

	const hProperties = attributes(node);

	// @ts-ignore
	const mdNode: CodeTabs = {
	children: node.children as any,
	type: types[node.name],
	...(['tr', 'td'].includes(node.name)
	? {}
	: {
	data: {
	hName: node.name,
	...(Object.keys(hProperties).length ? { hProperties } : {}),
	},
	}),
	position: node.position,

	const types = {
	Callout: NodeTypes['callout'],
	Code: 'code',
	CodeTabs: NodeTypes['codeTabs'],
	Glossary: NodeTypes['glossary'],
	Image: 'image',
	Table: 'table',
	Variable: NodeTypes['variable'],
	td: 'tableCell',
	tr: 'tableRow',
	};

fix: embeds and images save better #893

fix: embeds and images save better #893

Uh oh!

Conversation

jennspencer commented May 30, 2024

🧰 Changes

🧬 QA & Testing

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kellyjosephprice May 30, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

kellyjosephprice left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jennspencer commented Jun 12, 2024

Uh oh!

kellyjosephprice left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

rafegoldberg commented Jun 12, 2024

This PR was released!

Uh oh!

Uh oh!

kellyjosephprice May 30, 2024 •

edited

Loading