editor: remove image float

packages/editor/src/extensions/image/component.tsx

@@ -70,8 +70,6 @@ export function ImageComponent(
       ? node.attrs
       : clampSize(node.attrs, dom.clientWidth, aspectRatio);
 
-  const float = isMobile ? false : node.attrs.float;
-
   let align = node.attrs.align;
   if (!align) align = textDirection ? "right" : "left";
 
@@ -112,7 +110,6 @@ export function ImageComponent(
         className="image-container"
         sx={{
           ...getAlignmentStyles(node.attrs),
-          height: float ? size.height : "unset",
           position: "relative",
           mt: isSVG ? `24px` : 0,
           ":hover .drag-handle, :active .drag-handle": {
@@ -122,7 +119,7 @@ export function ImageComponent(
       >
         <Resizer
           style={{ marginTop: 5 }}
-          enabled={editor.isEditable && !float}
+          enabled={editor.isEditable}
           selected={selected}
           width={size.width}
           height={size.height}
@@ -161,7 +158,6 @@ export function ImageComponent(
                           "imageAlignLeft",
                           "imageAlignCenter",
                           "imageAlignRight",
-                          "imageFloat",
                           "imageProperties"
                         ]
                   }
@@ -258,8 +254,8 @@ export function ImageComponent(
                 position: "absolute",
                 top: 0,
                 left: 0,
-                width: editor.isEditable && !float ? "100%" : size.width,
-                height: editor.isEditable && !float ? "100%" : size.height,
+                width: editor.isEditable ? "100%" : size.width,
+                height: editor.isEditable ? "100%" : size.height,
                 bg: "background-secondary",
                 border: selected
                   ? "2px solid var(--accent)"

packages/editor/src/extensions/image/image.ts

@@ -95,7 +95,6 @@ export const ImageNode = Node.create<ImageOptions>({
       height: { default: null },
 
       // TODO: maybe these should be stored as styles?
-      float: getDataAttribute("float", false),
       align: getDataAttribute("align"),
 
       hash: getDataAttribute("hash"),

packages/editor/src/toolbar/icons.ts

@@ -120,7 +120,6 @@ import {
   mdiPencil,
   mdiCheckboxMultipleBlankOutline,
   mdiCheckboxMultipleMarked,
-  mdiFormatFloatLeft,
   mdiMessageOutline,
   mdiVectorLink,
   mdiPinOutline
@@ -172,7 +171,6 @@ export const Icons = {
   imageDownload: mdiProgressDownload,
   imageFailed: mdiProgressAlert,
   imageSettings: mdiImageEditOutline,
-  imageFloat: mdiFormatFloatLeft,
   colorClear: mdiInvertColorsOff,
   save: mdiContentSaveOutline,
   copy: mdiClipboardOutline,

packages/editor/src/toolbar/tools/image.tsx

@@ -45,7 +45,6 @@ export function ImageSettings(props: ToolProps) {
               "imageAlignLeft",
               "imageAlignCenter",
               "imageAlignRight",
-              "imageFloat",
               "imageProperties"
             ]
           : ["downloadAttachment"]
@@ -111,24 +110,6 @@ export function ImageAlignCenter(props: ToolProps) {
   );
 }
 
-export function ImageFloat(props: ToolProps) {
-  const { editor } = props;
-  const image = findSelectedNode(editor, "image");
-  if (!image) return null;
-
-  const { float } = image.attrs as ImageAttributes;
-
-  return (
-    <ToolButton
-      {...props}
-      toggled={!!float}
-      onClick={() =>
-        editor.chain().focus().setImageAlignment({ float: !float }).run()
-      }
-    />
-  );
-}
-
 export function ImageProperties(props: ToolProps) {
   const { editor } = props;
   const [isOpen, setIsOpen] = useState(false);

packages/intl/src/strings.ts

@@ -2307,7 +2307,6 @@ Use this if changes from other devices are not appearing on this device. This wi
   // alignCenter: () => t`Align center`,
   alignLeft: () => t`Align left`,
   alignRight: () => t`Align right`,
-  imageFloat: () => t`Float image`,
   imageProperties: () => t`Image properties`,
   previewAttachment: () => t`Preview attachment`,
   more: () => t`More`,