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.
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
.
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.