Updates mfm-js and adds position, scale, fg and bg function to mfm render #385
Johann150
Loading…
Reference in a new issue
No description provided.
Delete branch "puniko/FoundKey:update-mfm-core"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Updates mfm-js to version 0.23.3 and adds the additional functions misskey has added a while back
update of mfm-js was nessecary to get it to parse negative numbered arguments like
$[position.x=-1 test]probably needs a clean-all to get it working on update btw
Would it be worth adding in these changes to the cheat sheet too?
https://akkoma.dev/FoundKeyGang/FoundKey/src/branch/main/packages/client/src/pages/mfm-cheat-sheet.vue
@ -51,3 +54,3 @@};const genEl = (ast: mfm.MfmNode[]) => ast.map((token): VNode | VNode[] => {const genEl = (ast: mfm.MfmNode[], scale: Number) => ast.map((token): VNode | VNode[] => {I don't understand what this
scaleparameter is for, it doesn't seem to be read at any point and having to carry it through is kind of annoying.@ -188,0 +197,4 @@case 'scale': {const x = Math.min(parseFloat(token.props.args.x ?? '1'), 5);const y = Math.min(parseFloat(token.props.args.y ?? '1'), 5);style = `transform: scale(${x}, ${y});`;Not really happy with this because this allows to bypass the limitations that were created for
x2,x3andx4to not allow someone else to insert MFM resulting in people having HUGE things on their timeline that they have to scroll by for hours.My idea to fix it would be to use CSS and add it to these existing rules for
x2,x3andx4functions:.mfm-x2 {--mfm-zoom-size: 200%;}.mfm-x3 {--mfm-zoom-size: 400%;}.mfm-x4 {--mfm-zoom-size: 600%;}.mfm-x2, .mfm-x3, .mfm-x4 {font-size: var(--mfm-zoom-size);.mfm-x2, .mfm-x3, .mfm-x4 {/* only half effective */font-size: calc(var(--mfm-zoom-size) / 2 + 50%);.mfm-x2, .mfm-x3, .mfm-x4 {/* disabled */font-size: 100%;}}}(I'm not entirely sure if that works because those rules use
font-sizewhile you usedtransform: scale.)Transform's don't affect the content height
If you don't want it to overflow into the replies, then you should add overflow: hidden or clip to the note (unless you already have)
Thanks for pointing this out. I guess this is not an issue then.
@ -188,0 +203,4 @@}case 'fg': {let color = token.props.args.color;if (!/^[0-9a-f]{3,6}$/i.test(color)) color = 'f00';I think this should have an explicit check for
undefined(if the argument is not specified at all) andtrue(if the argument is specified without value).I also think the regex is incorrect since
{3,6}means "3 to 6 repetitions" and not "3 or 6 repetitions". I.e. this would allow 4 and 5 character colour codes which I think is not understood by browsers.Putting the default if it is an invalid colour seems a bit weird to me but I guess if that's what Misskey does we should probably do the same.
Recommended alternative regex:
/^[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$/or so.or
/^([0-9a-f]{3}){1,2}$/istolen from this gist@ -188,0 +209,4 @@}case 'bg': {let color = token.props.args.color;if (!/^[0-9a-f]{3,6}$/i.test(color)) color = 'f00';The comment for
fgapplies here as well of course.position,fg,bg