Feature/lock block (#96)

* add super basic locking functionality

* styled a lock state, added a lock icon to the toolbar

* added block locking to non text blocks, add click icon on block to unlock, added state to the tooltip content of the toolbar lock button

* removed button capability from the lock icon in the locked block, focused block when the toolbar lock icon is toggled

* disabled inputs if locked

* disable toolbar if locked

* allow block keyboard handlers to work if text block is locked

* prevent opening are you sure on locked blocks

* add locking multiple selected blocks

---------

Co-authored-by: celine <[e-mail]>

app/globals.css

···
 
     --gripperSVG: url("/gripperPattern.svg");
     --gripperSVG2: url("/gripperPattern2.svg");
+    --hatchSVG: url("/hatchPattern.svg");
   }
+
   @media (max-width: 640px) {
     :root {
       --list-marker-width: 20px;

components/Blocks/Block.tsx

···
 import { EmbedBlock } from "./EmbedBlock";
 import { MailboxBlock } from "./MailboxBlock";
 import { HeadingBlock } from "./HeadingBlock";
-import { CheckboxChecked, CheckboxEmpty } from "components/Icons";
+import {
+  CheckboxChecked,
+  CheckboxEmpty,
+  LockTiny,
+  UnlockSmall,
+  UnlockTiny,
+} from "components/Icons";
 import { AreYouSure } from "./DeleteBlock";
 import { useEntitySetContext } from "components/EntitySetProvider";
+import { Media } from "components/Media";
 import { useIsMobile } from "src/hooks/isMobile";
 import { DateTimeBlock } from "./DateTimeBlock";
 
···
     setAreYouSure?: (value: boolean) => void;
   },
 ) => {
-  // BaseBlock renders the actual block content
+  // BaseBlock renders the actual block content, delete states, controls spacing between block and list markers
   let BlockTypeComponent = BlockTypeComponents[props.type];
   return (
-    <div className="grow flex">
+    <div className="blockContentWrapper grow flex gap-2 z-[1]">
       {props.listData && <ListMarker {...props} />}
       {props.areYouSure ? (
         <AreYouSure
···
 };
 
 export const BlockMultiselectIndicator = (props: BlockProps) => {
+  let { rep } = useReplicache();
+  let isMobile = useIsMobile();
+
   let first = props.previousBlock === null;
 
   let isMultiselected = useUIState(
···
       s.selectedBlocks.length > 1,
   );
 
+  let isSelected = useUIState((s) =>
+    s.selectedBlocks.find((b) => b.value === props.entityID),
+  );
+  let isLocked = useEntity(props.value, "block/is-locked");
+
   let nextBlockSelected = useUIState((s) =>
     s.selectedBlocks.find((b) => b.value === props.nextBlock?.value),
   );
···
     s.selectedBlocks.find((b) => b.value === props.previousBlock?.value),
   );
 
-  if (isMultiselected)
-    // not sure what multiselected and selected is doing (?)
+  if (isMultiselected || (isLocked?.data.value && isSelected))
+    // not sure what multiselected and selected classes are doing (?)
+    // use a hashed pattern for locked things. show this pattern if the block is selected, even if it isn't multiselected
+
     return (
-      <div
-        className={`
-      blockSelectionBG multiselected selected
-      pointer-events-none bg-border-light
-      absolute right-2 left-2 bottom-0
-      ${first ? "top-2" : "top-0"}
-      ${!prevBlockSelected && "rounded-t-md"}
-      ${!nextBlockSelected && "rounded-b-md"}
-      `}
-      />
+      <>
+        <div
+          className={`
+          blockSelectionBG multiselected selected
+          pointer-events-none
+          bg-border-light
+          absolute right-2 left-2 bottom-0
+          ${first ? "top-2" : "top-0"}
+          ${!prevBlockSelected && "rounded-t-md"}
+          ${!nextBlockSelected && "rounded-b-md"}
+          `}
+          style={
+            isLocked?.data.value
+              ? {
+                  maskImage: "var(--hatchSVG)",
+                  maskRepeat: "repeat repeat",
+                }
+              : {}
+          }
+        ></div>
+        {isLocked?.data.value && (
+          <div
+            className={`
+            blockSelectionLockIndicator z-10
+            flex items-center
+            text-border rounded-full
+            absolute right-3
+
+            ${
+              props.type === "heading" || props.type === "text"
+                ? "top-[6px]"
+                : "top-0"
+            }`}
+          >
+            <LockTiny className="bg-bg-page p-0.5 rounded-full w-5 h-5" />
+          </div>
+        )}
+      </>
     );
 };
 

components/Blocks/EmbedBlock.tsx

···
   let isSelected = useUIState((s) =>
     s.selectedBlocks.find((b) => b.value === props.entityID),
   );
+
   useEffect(() => {
     if (props.preview) return;
     let input = document.getElementById(elementId.block(props.entityID).input);
···
   let isSelected = useUIState((s) =>
     s.selectedBlocks.find((b) => b.value === props.entityID),
   );
+  let isLocked = useEntity(props.entityID, "block/is-locked")?.data.value;
+
   let entity_set = useEntitySetContext();
   let [linkValue, setLinkValue] = useState("");
   let { rep } = useReplicache();
···
           className="w-full grow border-none outline-none bg-transparent "
           placeholder="www.example.com"
           value={linkValue}
+          disabled={isLocked}
           onChange={(e) => setLinkValue(e.target.value)}
           onKeyDown={(e) => {
             if (e.key === "Backspace" && linkValue === "") {
···
         />
         <div className="flex items-center gap-3 ">
           <button
-            className={`p-1 ${isSelected ? "text-accent-contrast" : "text-border"}`}
+            className={`p-1 ${isSelected && !isLocked ? "text-accent-contrast" : "text-border"}`}
             onMouseDown={(e) => {
               e.preventDefault();
               if (!linkValue || linkValue === "") {

components/Blocks/ExternalLinkBlock.tsx

···
   let isSelected = useUIState((s) =>
     s.selectedBlocks.find((b) => b.value === props.entityID),
   );
+  let isLocked = useEntity(props.value, "block/is-locked")?.data.value;
   let entity_set = useEntitySetContext();
   let [linkValue, setLinkValue] = useState("");
   let { rep } = useReplicache();
···
         <Separator />
         <Input
           type="url"
+          disabled={isLocked}
           className="w-full grow border-none outline-none bg-transparent "
           placeholder="www.example.com"
           value={linkValue}
···
         <div className="flex items-center gap-3 ">
           <button
             autoFocus={false}
-            className={`p-1 ${isSelected ? "text-accent-contrast" : "text-border"}`}
+            className={`p-1 ${isSelected && !isLocked ? "text-accent-contrast" : "text-border"}`}
             onMouseDown={(e) => {
               e.preventDefault();
               if (!linkValue || linkValue === "") {

components/Blocks/ImageBlock.tsx

···
   let isSelected = useUIState((s) =>
     s.selectedBlocks.find((b) => b.value === props.value),
   );
+  let isLocked = useEntity(props.value, "block/is-locked")?.data.value;
+
   useEffect(() => {
     if (props.preview) return;
     let input = document.getElementById(elementId.block(props.entityID).input);
···
             text-tertiary hover:text-accent-contrast hover:font-bold
             flex flex-auto gap-2 items-center justify-center
             hover:border-2 border-dashed  hover:border-accent-contrast rounded-lg
-            ${isSelected ? "border-2 border-tertiary font-bold" : "border border-border"}
+            ${isSelected && !isLocked ? "border-2 border-tertiary font-bold" : "border border-border"}
             ${props.pageType === "canvas" && "bg-bg-page"}`}
           onMouseDown={(e) => e.preventDefault()}
         >
···
           />{" "}
           Upload An Image
           <input
+            disabled={isLocked}
             className="h-0 w-0"
             type="file"
             accept="image/*"

components/Blocks/TextBlock/index.tsx

···
 export function TextBlock(
   props: BlockProps & { className?: string; preview?: boolean },
 ) {
+  let isLocked = useEntity(props.entityID, "block/is-locked");
   let initialized = useInitialPageLoad();
   let first = props.previousBlock === null;
   let permission = useEntitySetContext().permissions.write;
 
   return (
     <>
-      {(!initialized || !permission || props.preview) && (
+      {(!initialized ||
+        !permission ||
+        props.preview ||
+        isLocked?.data.value) && (
         <RenderedTextBlock
           entityID={props.entityID}
           className={props.className}
···
           pageType={props.pageType}
         />
       )}
-      {permission && !props.preview && (
+      {permission && !props.preview && !isLocked?.data.value && (
         <div
           className={`w-full relative group/text ${!initialized ? "hidden" : ""}`}
         >
···
         {(props.pageType === "doc" && props.first) ||
         props.pageType === "canvas" ? (
           <div
-            className={`${props.className} pointer-events-none italic text-tertiary flex flex-col`}
+            className={`${props.className} pointer-events-none italic text-tertiary flex flex-col `}
           >
             {headingLevel?.data.value === 1
               ? "Title"

components/Blocks/index.tsx

···
 "use client";
 
-import { Fact, useReplicache } from "src/replicache";
+import { Fact, useEntity, useReplicache } from "src/replicache";
 
 import { useUIState } from "src/useUIState";
 import { useBlocks } from "src/hooks/queries/useBlocks";
···
       : null,
   );
 
+  let isLocked = useEntity(props.lastBlock?.value || null, "block/is-locked");
   if (!entity_set.permissions.write) return null;
   if (
-    (props.lastBlock?.type === "text" || props.lastBlock?.type === "heading") &&
+    ((props.lastBlock?.type === "text" && !isLocked?.data.value) ||
+      props.lastBlock?.type === "heading") &&
     (!editorState?.editor || editorState.editor.doc.content.size <= 2)
   )
     return null;

components/Blocks/useBlockKeyboardHandlers.ts

···
 ) {
   let { rep } = useReplicache();
   let entity_set = useEntitySetContext();
+  let isLocked = !!useEntity(props.entityID, "block/is-locked")?.data.value;
 
   let isSelected = useUIState((s) => {
     let selectedBlocks = s.selectedBlocks;
     return (
-      (!isTextBlock[props.type] || selectedBlocks.length > 1) &&
+      (!isTextBlock[props.type] || selectedBlocks.length > 1 || isLocked) &&
       !!s.selectedBlocks.find((b) => b.value === props.entityID)
     );
   });
···
       let command = { Tab, ArrowUp, ArrowDown, Backspace, Enter, Escape }[
         e.key
       ];
-      command?.({ e, props, rep, entity_set, areYouSure, setAreYouSure });
+      command?.({
+        e,
+        props,
+        rep,
+        entity_set,
+        areYouSure,
+        setAreYouSure,
+        isLocked,
+      });
     };
     window.addEventListener("keydown", listener);
     return () => window.removeEventListener("keydown", listener);
-  }, [entity_set, isSelected, props, rep, areYouSure, setAreYouSure]);
+  }, [entity_set, isSelected, props, rep, areYouSure, setAreYouSure, isLocked]);
 }
 
 type Args = {
   e: KeyboardEvent;
+  isLocked: boolean;
   props: BlockProps;
   rep: Replicache<ReplicacheMutators>;
   entity_set: { set: string };
···
   if (!prevBlock) return;
 }
 
-async function Backspace({ e, props, rep, areYouSure, setAreYouSure }: Args) {
+async function Backspace({
+  e,
+  props,
+  rep,
+  areYouSure,
+  setAreYouSure,
+  isLocked,
+}: Args) {
   // if this is a textBlock, let the textBlock/keymap handle the backspace
+  if (isLocked) return;
   if (isTextBlock[props.type]) return;
   let el = e.target as HTMLElement;
   if (

components/Canvas.tsx

···
       className="w-[9px] shrink-0 py-1 mr-1 bg-bg-card cursor-grab touch-none"
     >
       <Media mobile={false} className="h-full grid grid-cols-1 grid-rows-1 ">
+        {/* the gripper is two svg's stacked on top of each other. 
+        One for the actual gripper, the other is an outline to endure the gripper stays visible on image backgrounds */}
         <div
           className="h-full col-start-1 col-end-2 row-start-1 row-end-2 bg-bg-page hidden group-hover/canvas-block:block"
-          style={{ maskImage: "var(--gripperSVG2)", maskRepeat: "space" }}
+          style={{ maskImage: "var(--gripperSVG2)", maskRepeat: "repeat" }}
         />
         <div
           className="h-full col-start-1 col-end-2 row-start-1 row-end-2 bg-tertiary hidden group-hover/canvas-block:block"
-          style={{ maskImage: "var(--gripperSVG)", maskRepeat: "space" }}
+          style={{ maskImage: "var(--gripperSVG)", maskRepeat: "repeat" }}
         />
       </Media>
     </div>

components/Icons.tsx

···
   );
 };
 
+export const LockTiny = (props: Props) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 1.52121C6.18249 1.52121 4.70911 2.99459 4.70911 4.8121V6.51834H4.67383C3.8454 6.51834 3.17383 7.18992 3.17383 8.01834V11.9686C3.17383 13.3493 4.29312 14.4686 5.67383 14.4686H10.3262C11.7069 14.4686 12.8262 13.3493 12.8262 11.9686V8.01834C12.8262 7.18991 12.1546 6.51834 11.3262 6.51834H11.2909V4.8121C11.2909 2.99459 9.8175 1.52121 8 1.52121ZM9.94088 6.51834V4.8121C9.94088 3.74018 9.07192 2.87121 8 2.87121C6.92807 2.87121 6.05911 3.74018 6.05911 4.8121V6.51834H9.94088ZM8.53274 10.603C8.90769 10.4096 9.16406 10.0186 9.16406 9.56766C9.16406 8.9247 8.64284 8.40347 7.99988 8.40347C7.35692 8.40347 6.83569 8.9247 6.83569 9.56766C6.83569 10.0322 7.10778 10.4332 7.50128 10.62L7.30909 12.3318C7.29246 12.48 7.40842 12.6097 7.55753 12.6097H8.44741C8.59476 12.6097 8.71015 12.4829 8.69631 12.3362L8.53274 10.603Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const UnlockTiny = (props: Props) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.70897 3.77456C4.70897 1.95705 6.18235 0.483673 7.99985 0.483673C9.81736 0.483673 11.2907 1.95705 11.2907 3.77456V6.51831H11.3262C12.1546 6.51831 12.8262 7.18988 12.8262 8.01831V11.9686C12.8262 13.3493 11.7069 14.4686 10.3262 14.4686H5.67381C4.2931 14.4686 3.17381 13.3493 3.17381 11.9686V8.01831C3.17381 7.18988 3.84538 6.51831 4.67381 6.51831H9.94074V3.77456C9.94074 2.70264 9.07178 1.83367 7.99985 1.83367C6.92793 1.83367 6.05897 2.70264 6.05897 3.77456V4.81478C6.05897 5.18757 5.75676 5.48978 5.38397 5.48978C5.01117 5.48978 4.70897 5.18757 4.70897 4.81478V3.77456ZM9.16404 9.56763C9.16404 10.0186 8.90767 10.4096 8.53272 10.603L8.69629 12.3362C8.71013 12.4829 8.59475 12.6097 8.4474 12.6097H7.55751C7.4084 12.6097 7.29244 12.48 7.30908 12.3318L7.50126 10.6199C7.10776 10.4332 6.83567 10.0322 6.83567 9.56763C6.83567 8.92467 7.3569 8.40344 7.99986 8.40344C8.64282 8.40344 9.16404 8.92467 9.16404 9.56763ZM2.99672 2.30807C2.78926 2.12583 2.47334 2.14627 2.29109 2.35374C2.10885 2.5612 2.12929 2.87712 2.33675 3.05937L3.30592 3.91072C3.51339 4.09297 3.82931 4.07253 4.01155 3.86506C4.1938 3.6576 4.17335 3.34168 3.96589 3.15943L2.99672 2.30807ZM0.346848 3.98126C0.426769 3.71693 0.705835 3.56744 0.970159 3.64736L2.98538 4.25669C3.24971 4.33661 3.39919 4.61567 3.31927 4.88C3.23935 5.14432 2.96029 5.29381 2.69596 5.21389L0.68074 4.60457C0.416415 4.52465 0.266927 4.24558 0.346848 3.98126ZM1.36125 5.86881C1.08858 5.91246 0.902922 6.16889 0.946575 6.44156C0.990227 6.71423 1.24666 6.89988 1.51933 6.85623L2.79161 6.65255C3.06428 6.6089 3.24993 6.35247 3.20628 6.0798C3.16263 5.80713 2.9062 5.62147 2.63353 5.66512L1.36125 5.86881Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
 export const LogoTiny = (
   props: Props & { fillColor: string; strokeColor: string },
 ) => {
···
         fillRule="evenodd"
         clipRule="evenodd"
         d="M19.2777 7.26811C19.6649 6.79541 19.5956 6.09831 19.1229 5.7111C18.6502 5.32389 17.9531 5.3932 17.5658 5.86591L11.0608 13.8073L8.55229 11.4827C8.10409 11.0674 7.40406 11.094 6.98873 11.5422C6.57339 11.9904 6.60003 12.6905 7.04823 13.1058L10.4194 16.2298C10.6432 16.4372 10.9428 16.543 11.2472 16.5221C11.5517 16.5012 11.834 16.3554 12.0273 16.1194L19.2777 7.26811ZM5.72192 5.78943C4.61735 5.78943 3.72192 6.68486 3.72192 7.78943V17.2894C3.72192 18.394 4.61735 19.2894 5.72192 19.2894H15.2219C16.3265 19.2894 17.2219 18.394 17.2219 17.2894V14.4884C17.2219 14.0741 16.8861 13.7384 16.4719 13.7384C16.0577 13.7384 15.7219 14.0741 15.7219 14.4884V17.2894C15.7219 17.5656 15.4981 17.7894 15.2219 17.7894H5.72192C5.44578 17.7894 5.22192 17.5656 5.22192 17.2894V7.78943C5.22192 7.51329 5.44578 7.28943 5.72192 7.28943H12.9815C13.3957 7.28943 13.7315 6.95364 13.7315 6.53943C13.7315 6.12522 13.3957 5.78943 12.9815 5.78943H5.72192Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const LockSmall = (props: Props) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 3.9657C9.73217 3.9657 7.89374 5.80413 7.89374 8.07196V10.1794H7.78851C6.82201 10.1794 6.03851 10.9629 6.03851 11.9294V17C6.03851 18.6569 7.38166 20 9.03851 20H14.9615C16.6184 20 17.9615 18.6569 17.9615 17V11.9294C17.9615 10.9629 17.178 10.1794 16.2115 10.1794H16.1063V8.07196C16.1063 5.80413 14.2678 3.9657 12 3.9657ZM14.3563 10.1794V8.07196C14.3563 6.77063 13.3013 5.7157 12 5.7157C10.6987 5.7157 9.64374 6.77063 9.64374 8.07196V10.1794H14.3563ZM12.5824 15.3512C12.9924 15.1399 13.2727 14.7123 13.2727 14.2193C13.2727 13.5165 12.7029 12.9467 12 12.9467C11.2972 12.9467 10.7274 13.5165 10.7274 14.2193C10.7274 14.7271 11.0247 15.1654 11.4548 15.3696L11.2418 17.267C11.2252 17.4152 11.3411 17.5449 11.4902 17.5449H12.5147C12.6621 17.5449 12.7774 17.4181 12.7636 17.2714L12.5824 15.3512Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const UnlockSmall = (props: Props) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.89376 6.62482C7.89376 4.35699 9.7322 2.51855 12 2.51855C14.2678 2.51855 16.1063 4.35699 16.1063 6.62482V10.1794H16.2115C17.178 10.1794 17.9615 10.9629 17.9615 11.9294V17C17.9615 18.6569 16.6184 20 14.9615 20H9.03854C7.38168 20 6.03854 18.6569 6.03854 17V11.9294C6.03854 10.9629 6.82204 10.1794 7.78854 10.1794H14.3563V6.62482C14.3563 5.32349 13.3013 4.26855 12 4.26855C10.6987 4.26855 9.64376 5.32349 9.64376 6.62482V7.72078C9.64376 8.20403 9.25201 8.59578 8.76876 8.59578C8.28551 8.59578 7.89376 8.20403 7.89376 7.72078V6.62482ZM13.1496 14.2193C13.1496 14.7123 12.8693 15.1399 12.4593 15.3512L12.6405 17.2714C12.6544 17.4181 12.539 17.5449 12.3916 17.5449H11.3672C11.218 17.5449 11.1021 17.4152 11.1187 17.267L11.3317 15.3696C10.9016 15.1654 10.6043 14.7271 10.6043 14.2193C10.6043 13.5165 11.1741 12.9467 11.8769 12.9467C12.5798 12.9467 13.1496 13.5165 13.1496 14.2193ZM5.62896 5.3862C5.4215 5.20395 5.10558 5.2244 4.92333 5.43186C4.74109 5.63932 4.76153 5.95525 4.969 6.13749L6.06209 7.09771C6.26955 7.27996 6.58548 7.25951 6.76772 7.05205C6.94997 6.84458 6.92952 6.52866 6.72206 6.34642L5.62896 5.3862ZM3.5165 6.64283C3.25418 6.55657 2.97159 6.69929 2.88533 6.96161C2.79906 7.22393 2.94178 7.50652 3.20411 7.59278L5.54822 8.36366C5.81054 8.44992 6.09313 8.3072 6.1794 8.04488C6.26566 7.78256 6.12294 7.49997 5.86062 7.41371L3.5165 6.64283ZM3.54574 9.42431C3.52207 9.14918 3.72592 8.90696 4.00105 8.8833L5.52254 8.75244C5.79766 8.72878 6.03988 8.93263 6.06354 9.20776C6.08721 9.48288 5.88335 9.7251 5.60823 9.74876L4.08674 9.87962C3.81162 9.90329 3.5694 9.69943 3.54574 9.42431Z"
         fill="currentColor"
       />
     </svg>

components/Toolbar/BlockToolbar.tsx

···
 import { metaKey } from "src/utils/metaKey";
 import { getBlocksWithType } from "src/hooks/queries/useBlocks";
 import { useUIState } from "src/useUIState";
+import { LockBlockButton } from "./LockBlockButton";
 
 export const BlockToolbar = (props: {
   setToolbarState: (state: "areYouSure" | "block") => void;
···
         >
           <DeleteSmall />
         </ToolbarButton>
-
+        <Separator classname="h-6" />
         {focusedEntityType?.data.value !== "canvas" ? (
-          <MoveBlockButtons />
+          <>
+            <MoveBlockButtons />
+            <Separator classname="h-6" />
+          </>
         ) : null}
+
+        <LockBlockButton />
       </div>
     </div>
   );
···
   };
   return (
     <>
-      <Separator classname="h-5" />
       <ToolbarButton
         onClick={async () => {
           let [sortedBlocks, siblings] = await getSortedSelection();

components/Toolbar/LockBlockButton.tsx

···
+import { useUIState } from "src/useUIState";
+import { ToolbarButton } from ".";
+import { useEntity, useReplicache } from "src/replicache";
+import { LockSmall, UnlockSmall } from "components/Icons";
+import { focusBlock } from "src/utils/focusBlock";
+
+export function LockBlockButton() {
+  let focusedBlock = useUIState((s) => s.focusedEntity);
+  let selectedBlocks = useUIState((s) => s.selectedBlocks);
+  let type = useEntity(focusedBlock?.entityID || null, "block/type");
+  let locked = useEntity(focusedBlock?.entityID || null, "block/is-locked");
+  let { rep } = useReplicache();
+  if (focusedBlock?.entityType !== "block") return;
+  return (
+    <ToolbarButton
+      disabled={false}
+      onClick={async () => {
+        if (!locked?.data.value) {
+          await rep?.mutate.assertFact({
+            entity: focusedBlock.entityID,
+            attribute: "block/is-locked",
+            data: { value: true, type: "boolean" },
+          });
+          if (selectedBlocks.length > 1) {
+            for (let block of selectedBlocks) {
+              await rep?.mutate.assertFact({
+                attribute: "block/is-locked",
+                entity: block.value,
+                data: { value: true, type: "boolean" },
+              });
+            }
+          }
+        } else {
+          await rep?.mutate.retractFact({ factID: locked.id });
+          if (selectedBlocks.length > 1) {
+            for (let block of selectedBlocks) {
+              await rep?.mutate.retractAttribute({
+                attribute: "block/is-locked",
+                entity: block.value,
+              });
+            }
+          } else {
+            type &&
+              focusBlock(
+                {
+                  type: type.data.value,
+                  parent: focusedBlock.parent,
+                  value: focusedBlock.entityID,
+                },
+                { type: "end" },
+              );
+          }
+        }
+      }}
+      tooltipContent={
+        <span>{!locked?.data.value ? "Lock Editing" : " Unlock to Edit"}</span>
+      }
+    >
+      {!locked?.data.value ? <LockSmall /> : <UnlockSmall />}
+    </ToolbarButton>
+  );
+}

components/Toolbar/MultiSelectToolbar.tsx

···
 import { useSmoker } from "components/Toast";
 import { getBlocksWithType } from "src/hooks/queries/useBlocks";
 import { Replicache } from "replicache";
+import { LockBlockButton } from "./LockBlockButton";
 
 export const MultiselectToolbar = (props: {
   setToolbarState: (state: "areYouSure" | "multiselect") => void;
···
           <TrashSmall />
         </ToolbarButton>
         <ToolbarButton
+          disabled={false}
           tooltipContent="Copy Selected Blocks"
           onClick={handleCopy}
         >
           <CopySmall />
         </ToolbarButton>
+        <LockBlockButton />
         {/* Add more multi-select toolbar buttons here */}
       </div>
     </div>

components/Toolbar/TextToolbar.tsx

···
 import { ToolbarTypes } from ".";
 import { schema } from "components/Blocks/TextBlock/schema";
 import { TextAlignmentButton } from "./TextAlignmentToolbar";
+import { LockBlockButton } from "./LockBlockButton";
 
 export const TextToolbar = (props: {
   lastUsedHighlight: string;
···
         icon={<BoldSmall />}
       />
       <TextDecorationButton
-        tooltipContent=<div className="flex flex-col gap-1 justify-center">
-          <div className="italic font-normal text-center">Italic</div>
-          <div className="flex gap-1">
-            <ShortcutKey>{metaKey()}</ShortcutKey> +{" "}
-            <ShortcutKey> I </ShortcutKey>
+        tooltipContent={
+          <div className="flex flex-col gap-1 justify-center">
+            <div className="italic font-normal text-center">Italic</div>
+            <div className="flex gap-1">
+              <ShortcutKey>{metaKey()}</ShortcutKey> +{" "}
+              <ShortcutKey> I </ShortcutKey>
+            </div>
           </div>
-        </div>
+        }
         mark={schema.marks.em}
         icon={<ItalicSmall />}
       />
···
         setToolbarState={props.setToolbarState}
       />
       <Separator classname="h-6" />
+      <LinkButton setToolbarState={props.setToolbarState} />
+      <Separator classname="h-6" />
       <TextBlockTypeButton setToolbarState={props.setToolbarState} />
       <TextAlignmentButton setToolbarState={props.setToolbarState} />
-      <Separator classname="h-6" />
       <ListButton setToolbarState={props.setToolbarState} />
       <Separator classname="h-6" />
-      <LinkButton setToolbarState={props.setToolbarState} />
+
+      <LockBlockButton />
     </>
   );
 };

components/Toolbar/index.tsx

···
 
   return (
     <Tooltip.Provider>
-      <div className="toolbar flex items-center justify-between w-full gap-6">
-        <div className="toolbarOptions flex gap-[6px] items-center grow">
+      <div className="toolbar flex items-center justify-between w-full gap-6 h-[26px]">
+        <div className="toolbarOptions flex gap-1 sm:gap-[6px] items-center grow">
           {toolbarState === "default" ? (
             <TextToolbar
               lastUsedHighlight={lastUsedHighlight}
···
   active?: boolean;
   disabled?: boolean;
 }) => {
+  let focusedBlock = useUIState((s) => s.focusedEntity);
+  let isLocked = useEntity(focusedBlock?.entityID || null, "block/is-locked");
+  let isDisabled =
+    props.disabled === undefined ? !!isLocked?.data.value : props.disabled;
+
   return (
     <TooltipButton
       onMouseDown={(e) => {
         e.preventDefault();
         props.onClick && props.onClick(e);
       }}
-      disabled={props.disabled}
+      disabled={isDisabled}
       content={props.tooltipContent}
       className={`
-        flex items-center rounded-md border border-transparent hover:border-border  active:bg-border-light active:text-primary
+        flex items-center rounded-md border border-transparent 
         ${props.className}
         ${
-          props.active
+          props.active && !isDisabled
             ? "bg-border-light text-primary"
-            : props.disabled
+            : isDisabled
               ? "text-border cursor-not-allowed"
-              : "text-secondary  hover:text-primary"
+              : "text-secondary  hover:text-primary hover:border-border  active:bg-border-light active:text-primary"
         }
         `}
     >

public/hatchPattern.svg

···
+<!-- <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.41418 0H0V1.41418L1.41418 0ZM0 5.41418V4L4 0H5.41418L0 5.41418ZM0 9.41418V8L8 0H9.41418L0 9.41418ZM0 13.4142V12L12 0H13.4142L0 13.4142ZM0 17.4142V16L16 0H17.4142L0 17.4142ZM0 21.4142V20L20 0H21.4142L0 21.4142ZM0 25.4142V24L24 0H25.4142L0 25.4142ZM0 29.4142V28L28 0H29.4142L0 29.4142ZM1.41418 32H0L32 0V1.41418L1.41418 32ZM5.41418 32H3.99997L32 4V5.41418L5.41418 32ZM9.41418 32H7.99997L32 8V9.41418L9.41418 32ZM13.4142 32H12L32 12V13.4142L13.4142 32ZM17.4142 32H16L32 16V17.4142L17.4142 32ZM21.4142 32H20L32 20V21.4142L21.4142 32ZM25.4142 32H24L32 24V25.4142L25.4142 32ZM29.4142 32H28L32 28V29.4142L29.4142 32Z" fill="black"/>
+</svg> -->
+
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.41421 0H0V1.41421L1.41421 0ZM0 7.4142V5.99999L5.99999 0H7.4142L0 7.4142ZM0 13.4142V12L12 0H13.4142L0 13.4142ZM0 19.4142V18L18 0H19.4142L0 19.4142ZM0 25.4142V24L24 0H25.4142L0 25.4142ZM1.4142 30H0L30 0V1.4142L1.4142 30ZM7.4142 30H5.99998L30 5.99999V7.4142L7.4142 30ZM13.4142 30H12L30 12V13.4142L13.4142 30ZM19.4142 30H18L30 18V19.4142L19.4142 30ZM25.4142 30H24L30 24V25.4142L25.4142 30Z" fill="black"/>
+</svg>
+

src/replicache/attributes.ts

···
     type: "boolean",
     cardinality: "one",
   },
+  "block/is-locked": {
+    type: "boolean",
+    cardinality: "one",
+  },
   "block/check-list": {
     type: "boolean",
     cardinality: "one",

src/replicache/mutations.ts

···
   { blockEntity: string } | { blockEntity: string }[]
 > = async (args, ctx) => {
   for (let block of [args].flat()) {
+    let [isLocked] = await ctx.scanIndex.eav(
+      block.blockEntity,
+      "block/is-locked",
+    );
+    if (isLocked?.data.value) continue;
     let images = await ctx.scanIndex.eav(block.blockEntity, "block/image");
     ctx.runOnServer(async ({ supabase }) => {
       for (let image of images) {

src/utils/focusBlock.ts

···
   block: Pick<Block, "type" | "value" | "parent">,
   position: Position,
 ) {
+  useUIState.getState().setSelectedBlock(block);
+  useUIState.getState().setFocusedBlock({
+    entityType: "block",
+    entityID: block.value,
+    parent: block.parent,
+  });
   if (block.type !== "text" && block.type !== "heading") {
-    useUIState.getState().setSelectedBlock(block);
-    useUIState.getState().setFocusedBlock({
-      entityType: "block",
-      entityID: block.value,
-      parent: block.parent,
-    });
     return true;
   }
   let nextBlockID = block.value;