Merge pull request 'Feat: add MFM crop content' (#10211) from ikiko/calckey:feat-mfm-crop into develop

Reviewed-on: https://codeberg.org/calckey/calckey/pulls/10211

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.

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"

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);

packages/client/src/pages/mfm-cheat-sheet.vue

@@ -365,6 +365,18 @@
 						</div>
 					</div>
 				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.crop }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.cropDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_crop" />
+							<MkTextarea v-model="preview_crop"
+								><span>MFM</span></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
 				<div class="section _block">
 					<div class="title">{{ i18n.ts._mfm.position }}</div>
 					<div class="content">
@@ -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]"
 );

packages/client/src/scripts/mfm-tags.ts

@@ -12,6 +12,7 @@ export const MFM_TAGS = [
 	"x4",
 	"scale",
 	"position",
+	"crop",
 	"fg",
 	"bg",
 	"font",