From 62fce3a32e3e6a06c0b549dcbc5bd96eaba61c6e Mon Sep 17 00:00:00 2001
From: Isabell <isa.kiral@gmail.com>
Date: Sun, 28 May 2023 15:19:57 +1000
Subject: [PATCH] add ability to crop content

---
 locales/de-DE.yml                             |  2 ++
 locales/en-US.yml                             |  2 ++
 packages/client/src/components/mfm.ts         |  8 ++++++++
 packages/client/src/pages/mfm-cheat-sheet.vue | 15 +++++++++++++++
 packages/client/src/scripts/mfm-tags.ts       |  1 +
 5 files changed, 28 insertions(+)

diff --git a/locales/de-DE.yml b/locales/de-DE.yml
index 8ddba5ae0..2a039af4c 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 6fe8bccfc..84e68ea6b 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 d9d78846e..650a79832 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 50bb43fcd..a22d7ce1e 100644
--- a/packages/client/src/pages/mfm-cheat-sheet.vue
+++ b/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]"
 );
diff --git a/packages/client/src/scripts/mfm-tags.ts b/packages/client/src/scripts/mfm-tags.ts
index da0bea818..2fadcd80e 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",