diff --git a/locales/de-DE.yml b/locales/de-DE.yml index 8ddba5ae0b..2a039af4cf 100644 --- a/locales/de-DE.yml +++ b/locales/de-DE.yml @@ -1178,6 +1178,8 @@ _mfm: background: Hintergrundfarbe positionDescription: Inhalt um einen bestimmten Betrag verschieben. position: Position + cropDescription: Inhalt zuschneiden. + crop: Zuschneiden scale: Maßstab scaleDescription: Skaliere den Inhalt um einen bestimmten Betrag. foregroundDescription: Ändern der Vordergrundfarbe von Text. diff --git a/locales/en-US.yml b/locales/en-US.yml index 6fe8bccfc9..84e68ea6bc 100644 --- a/locales/en-US.yml +++ b/locales/en-US.yml @@ -1270,6 +1270,8 @@ _mfm: fadeDescription: "Fades content in and out." position: "Position" positionDescription: "Move content by a specified amount." + crop: "Crop" + cropDescription: "Crop content." scale: "Scale" scaleDescription: "Scale content by a specified amount." foreground: "Foreground color" diff --git a/packages/client/src/components/mfm.ts b/packages/client/src/components/mfm.ts index d9d78846e5..650a798324 100644 --- a/packages/client/src/components/mfm.ts +++ b/packages/client/src/components/mfm.ts @@ -243,6 +243,14 @@ export default defineComponent({ style = `transform: translateX(${x}em) translateY(${y}em);`; break; } + case "crop": { + const top = parseFloat(token.props.args.top ?? "0%"); + const right = parseFloat(token.props.args.right ?? "0%"); + const bottom = parseFloat(token.props.args.bottom ?? "0%"); + const left = parseFloat(token.props.args.left ?? "0%"); + style = `clip-path: inset(${top} ${right} ${bottom} ${left});`; + break; + } case "scale": { const x = Math.min(parseFloat(token.props.args.x ?? "1"), 5); const y = Math.min(parseFloat(token.props.args.y ?? "1"), 5); diff --git a/packages/client/src/pages/mfm-cheat-sheet.vue b/packages/client/src/pages/mfm-cheat-sheet.vue index 50bb43fcde..a22d7ce1ec 100644 --- a/packages/client/src/pages/mfm-cheat-sheet.vue +++ b/packages/client/src/pages/mfm-cheat-sheet.vue @@ -365,6 +365,18 @@ +
+
{{ i18n.ts._mfm.crop }}
+
+

{{ i18n.ts._mfm.cropDescription }}

+
+ + MFM +
+
+
{{ i18n.ts._mfm.position }}
@@ -483,6 +495,9 @@ let preview_rotate = $ref( let preview_position = $ref( "$[position.y=-1 Positioning]\n$[position.x=-1 Positioning]" ); +let preview_crop = $ref( + "$[crop.top=50 🍮] $[crop.right=50 🍮] $[crop.bottom=50 🍮] $[crop.left=50 🍮]" +); let preview_scale = $ref( "$[scale.x=1.3 Scaling]\n$[scale.x=1.3,y=2 Scaling]\n$[scale.y=0.3 Tiny scaling]" ); diff --git a/packages/client/src/scripts/mfm-tags.ts b/packages/client/src/scripts/mfm-tags.ts index da0bea8186..2fadcd80ea 100644 --- a/packages/client/src/scripts/mfm-tags.ts +++ b/packages/client/src/scripts/mfm-tags.ts @@ -12,6 +12,7 @@ export const MFM_TAGS = [ "x4", "scale", "position", + "crop", "fg", "bg", "font",