Skip to content
FLRMARK
NEW

Introducing Floralmark

Introducing Floralmark the new WYSIWYG markdown editor.

Floralmark is the new WYSIWYG markdown editor on Florality web.

Introducing Floralmark

What changed

Hello everyone. I have been developing a new markdown editor for Florality called Floralmark. I built it as a standalone editor running on the same engine that TipTap the previous editor. This editor uses a slightly different syntax to the previous tiptap editor and is not 100% ready. However, it has been tested enought to the point where it works well enought to be a drag and drop replacement.

Why I did this

  • TipTap has been really hard to extend.

  • TipTap didnt have the functionality I wanted from a WYSIWYG markdown editor.

  • I needed to be able to give the user a raw markdown editor view.,

  • I wanted to have a WYSIWYG markdown editor that would also work on React Native for the Mobile app.

Where it shows up

The new editor is on:

  • Notes

  • Member About

  • Markdown custom fields

  • Mailbox, shrine, & relationships

Read-only versions are on the About and field cards. These use the same engine without the toolbar, so what you see while editing matches what others can see.

Message compose on the in-system messaging is still a plain textarea.

A guide

Live vs source

The toolbar has a code-file button that switches what surface you are using

Mode What you get
Live Formatted document. Type markdown and it turns into the headings, lists, bold, ect…
Source Raw Florality markdown in a textarea. Use this for codeblocks with a language, embeds, math, and anything the live chrome does not insert.

Live mode also shows a live preview when the caret (the blinking thing when you type) is in a heading, list, quote, or anything that has a markdown marker. The symbols (#, -. >, …) appear at the start of the line or where ever they are within the text. This behaviour is similar to Obsidian.

The toolbar

The toolbar stays on top of the editor even when you scroll through the content. On phones it is one horizontal row of 44px buttons, and it is scrollable.

From left to right:

  1. Undo & Redo

  2. Block types - Paragraph or Headings 1-3

  3. Marks - Bold, Italics, Underline, Strke, Inline-code, Highlight

  4. Insert/Structure - List, allignments, link, image, table

  5. Live ↔ source

Selecting text opens a bubble menu with the same marks && allignment and link.

Slash menu

Type the / at the start of the line, or after a space. Filtering by name, using the arrow keys to move around, Enter to run the item selected, Escape to close.

Command Inserts
Text Normal paragraph
Heading 1 / 2 / 3 Heading
Bullet list Unordered list
Numbered list Ordered list
Task list Checkboxes
Quote Blockquote
Divider Horizontal rule
Columns (2) / Columns (3) Side-by-side layout
Link Link form (URL + label)
Spoiler Hidden text (placehoder selected so the next keys replace it)
Image Image form (upload or URL)
Table Size grid

/spoiler and /link work URL’s like https://floralitys.com/our-team do not open the menu since the / is ignored after :.

Mentions

Type @ to metion a member. Arrow keys, Enter or Tab to pick, Escape to close.

Stored as a stable ID, so renaming a member does not brake old notes:

[@arch](member:UUID)

Type markdown, get formatting

In live mode, markdown at the caret coverts as you type. Undo (ctrl + z or if on mac cmd + z) or Backspace undoes the last conversion.

Blocks (start of a line, then space unless noted):

You type Result
# … ###### then space Heading
-, *, or + then space Bullet list
1. then space Numbered list
> then space Quote
---/***,___ then space Divider
``` (third backtick) Code block - optional syntax highlighting after the backticks
[ ] or [x] then space item inside a list item Task checkbox

Inline

You type Result
**bold** or __bold__ Bold
*italic* or _italic_ Italic
++underline++ Underline
~~strike~~ Strikethrough
code (two backticks `) Inline code
==highlight== Highlight
spoiler (two of these || on the front and two more on the back) Just like a discord spoiler
[label](https://example.com/path) Link

-- after a character becomes an em dash(—). --- at the start of a line still becomes a divider.

Columns

/columns (2 or 3) inserts a Notion-style layout. Arrow Down at the end of the last column leaves the layout.

Source:

::::columns
:::column
Left
:::
:::column
Right
:::
::::

Highlights and color

Toolbar or bubble Highlight opens a pallete.

  • Default swatch → ==text==

  • Named swatch → ==yellow:text==

  • Custom hex → ==#rrggbb:text==

Paint mixes with the card surface so it stays readable in every appeareance scheme.

Code

  • Inline with the two ` or mod + `
  • Code block by running /code or type ```. put the language on the opening part of the codeblock in source like ```ts.

Live codeblocks are syntax-highlighted. There is no language picker on the toolbar.

Paste

  • Markdown and HTML from other apps convert into Florality markdown.

  • Webpage copy with both text and image files keeps the document text.

  • Screenshots and explicit image copies upload.

  • Mixed Florality syntax (spoilers, colored highlights, mentions) is accepted and rewritten to the storage forms above.

Tips

  1. Prefer live mode for prose; use source for fences, embeds, and tricky HTML alignment.

  2. / is faster than hunting the toolbar on a phone.

  3. Empty the field with Mod-A then Delete while the editor is focused — that is treated as a real clear, not a load glitch.

  4. Spoilers are comfort UI, not access control. Anyone who can read the markdown can see the text.

  5. Mentions need a valid member UUID. Invalid member: links stay as plain links.

Bug fixes

iOS Safari white flash / “webpage was reloaded”
Home Screen and Safari tabs were dying (jetsam / WASM abort). Drafts, Customize, Set front, and search vanished. Web PowerSync WA-SQLite is never started on iPhone/iPad; members stay on tRPC. Also: retry failed RSC fetches instead of a full MPA reload, stop AuthGate from bouncing to /sign-in on Clerk flicker, and stop rewriting the viewport meta (that could reload a home-screen app).

Custom fields wiping themselves
Accidental empty saves (setValue("") from remount / live-save races) deleted the DB row. Empty writes now keep existing content unless you explicitly Clear (allowEmptyOverwrite). Rename no longer concatenates (full namecustom fields).

Image import
*.apparyllis.com (Simply Plural CDN) is blocked before DNS. getaddrinfo ENOTFOUND is a host-not-found toast, not a raw Node error. Placeholder CDNs that return SVG get a .png suffix so rehost can succeed.

Storage proxies
Member About, notes, custom icons, friend banners, messaging icons, and related MinIO routes were tightened so media does not 404 or leak after a crash/reload.

Member list banners
Broken/empty banner URLs no longer poison list cards.

New in product

In-app bug reports
Settings (web): title, what went wrong, steps, expected vs actual, attachments. Drafts persist in localStorage (7 days). Bug bounty: 15 resolved reports unlocks a badge; admins can grant/revoke.

OpenPlural v0.1
Export: Settings → Export → Download OpenPlural JSON. Import: Settings → Import (and onboarding). Groups vs directories (record_kind), inline assets, co-front as one session per assignment, skip warnings for modules Florality does not take. Export privacy stays a spec object, not an array (that dest-parser bug is on them). STILL IN BETA

Removed / Changed

Simply Plural scheduled sync
Recurring delta sync is gone (web, Pro perk). One-time SP import stays. PluralKit scheduled sync stays.

Back to all updates