FeaturesDevelopersBlogPricingDocsLoginTalk to us
Back to all

RichText Inline Mode

July 19th, 2023

Graphic for RichText mode

RichText Inline Mode

This past week we released Inline mode in v0.10.0 of @makeswift/runtime. Inline mode is a configuration option for RichText that allows you to edit text without affecting styles or HTML structure. It's great for editing the content of inline elements like buttons and links, and prevents you from creating hydration mismatch errors.



While implementing Inline mode, we reworked the architecture of the RichText control so that real-time collaboration is faster and rapid changes like holding `undo` are more performant.



To switch between Block and Inline mode, change your component registration like so:

ReactRuntime.registerComponent(Component, {
  type: 'component',
  label: 'Component',
  props: {
-    text: RichText(),
+    text: RichText({
+      mode: RichText.Mode.Inline,
+    }),
  },
})

Upgrading Text components

Under the hood, the Text component that ships with all sites uses the RichText control. After upgrading to v0.10.0 and selecting a `Text` component, you'll be prompted to update the component in the right sidebar.

Illustration of sitemap

This update migrates data and renders the new version of the Text component with some small visual changes:



In the past:

  • white-space-collapse: preserve was used in Text components within Makeswift, but white-space-collapse: collapse was used in live sites. The new Text component uses preserve in both versions.

  • setting "Text align" on a ''Numbered list" or "Bulleted list" had no effect. The text-align property will now apply. If you don't like this change you can simply reset the "Text align" panel in the right sidebar.

  • the default list-style and padding-inline-start values could be overridden by CSS resets like tailwind's. This could lead to a confusing editing experience when creating nested lists. We added some opinionated CSS to prevent the default list-style property from being reset and also decreased the default padding-inline-start to 20px.

We have tested the upgrade extensively, but if you do see any changes other than the three listed above simply "cmd/ctrl + z" and reach out to us in Discord.

Improvements & fixes

  • Added h4, h5, and h6 block types to the upgraded RichText control.

  • Fixed visually misaligned loading state in the site selector.

  • Fixed a client-side error that was happening for sites using the default renderer with very old data.

  • Updated the placeholder for the preview URL in the host settings to match our current API.

  • Fixed a bug where pages falsely had the status of "published" when they were first created.

  • Fixed a visual bug where the Element Id input didn't look editable in the right sidebar.

  • Fixed a bug that could occur when creating a page from a template.

  • Fixed a visual bug where the width value of a newly dropped component didn't match the default value in the sidebar.

  • Updated list styles to prevent CSS resets from overriding them.