Allow creating read-only documents through the /new endpoint with readonly=true (fixes issue #48)

app/components/DocumentTitle.tsx

@@ -16,11 +16,22 @@ export function DocumentTitle() {
     }
   }, [updateDoc]);
 
-  const startEditing = useCallback(() => {
+  if (doc.readOnly) {
-    ref.current?.select();
+    return (
-    ref.current?.focus();
+      <div
-  }, [ref.current]);
+        className="flex justify-center items-center w-full"
-
+        title={doc.title}
+      >
+        <span
+          className={
+            "min-w-[15vw] border-none text-ellipsis text-slate-300 px-2 pl-10 py-1 rounded-sm bg-transparent placeholder:text-slate-400 focus:bg-black/30 focus:outline-none focus:border-none hover:cursor-text transition dark:bg-transparent dark:text-slate-200 dark:placeholder:text-slate-400 dark:focus:bg-black dark:focus:bg-opacity-10"
+          }
+        >
+          {doc.title}
+        </span>
+      </div>
+    );
+  } else {
     return (
       <updateDoc.Form method="post" action={`/actions/${doc.id}/update`}>
         <div
@@ -44,7 +55,9 @@ export function DocumentTitle() {
           </label>
 
           {match(editedTitle)
-          .with(doc.title, () => <p className="ml-2 text-transparent">Save</p>)
+            .with(doc.title, () => (
+              <p className="ml-2 text-transparent">Save</p>
+            ))
             .with("", () => (
               <button
                 className="ml-2 text-lime-500 hover:text-lime-600 transition"
@@ -64,4 +77,5 @@ export function DocumentTitle() {
         </div>
       </updateDoc.Form>
     );
+  }
 }

app/components/Home/HomeInfoBoxSection.tsx

@@ -142,7 +142,13 @@ function SampleJSONPreview({
 }) {
   return (
     <JsonDocProvider
-      doc={{ id: "sample", title: "Sample", type: "raw", contents: "" }}
+      doc={{
+        id: "sample",
+        title: "Sample",
+        type: "raw",
+        readOnly: false,
+        contents: "",
+      }}
       path={initialSelection}
     >
       <JsonProvider initialJson={json}>

app/components/JsonEditor.tsx

@@ -81,7 +81,7 @@ export function JsonEditor() {
     <CodeEditor
       language="json"
       content={jsonMapped.json}
-      readOnly={false}
+      readOnly={true}
       onUpdate={onUpdate}
       selection={selection}
     />

app/jsonDoc.server.ts

@@ -3,6 +3,7 @@ import { customRandom } from "nanoid";
 type BaseJsonDocument = {
   id: string;
   title: string;
+  readOnly: boolean;
 };
 
 export type RawJsonDocument = BaseJsonDocument & {
@@ -17,6 +18,7 @@ export type UrlJsonDocument = BaseJsonDocument & {
 
 export type CreateJsonOptions = {
   ttl?: number;
+  readOnly?: boolean;
   metadata?: any;
 };
 
@@ -41,11 +43,12 @@ export async function createFromUrl(
   options?: CreateJsonOptions
 ): Promise<JSONDocument> {
   const docId = createId();
-  const doc = {
+  const doc: JSONDocument = {
     id: docId,
     type: <const>"url",
     url: url.href,
     title: title ?? url.hostname,
+    readOnly: options?.readOnly ?? false,
   };
 
   await DOCUMENTS.put(docId, JSON.stringify(doc), {
@@ -62,7 +65,13 @@ export async function createFromRawJson(
   options?: CreateJsonOptions
 ): Promise<JSONDocument> {
   const docId = createId();
-  const doc = { id: docId, type: <const>"raw", contents, title: filename };
+  const doc: JSONDocument = {
+    id: docId,
+    type: <const>"raw",
+    contents,
+    title: filename,
+    readOnly: options?.readOnly ?? false,
+  };
 
   await DOCUMENTS.put(docId, JSON.stringify(doc), {
     expirationTtl: options?.ttl ?? undefined,

app/routes/new.tsx

@@ -1,4 +1,4 @@
-import { LoaderFunction, redirect } from "remix";
+import { json, LoaderFunction, redirect } from "remix";
 import invariant from "tiny-invariant";
 import { sendEvent } from "~/graphJSON.server";
 import {
@@ -12,6 +12,8 @@ export let loader: LoaderFunction = async ({ request, context }) => {
   const jsonUrl = url.searchParams.get("url");
   const base64EncodedJson = url.searchParams.get("j");
   const ttl = url.searchParams.get("ttl");
+  const readOnly = url.searchParams.get("readonly");
+  const title = url.searchParams.get("title");
 
   if (!jsonUrl && !base64EncodedJson) {
     return redirect("/");
@@ -27,12 +29,16 @@ export let loader: LoaderFunction = async ({ request, context }) => {
     invariant(options.ttl >= 60, "ttl must be at least 60 seconds");
   }
 
+  if (typeof readOnly === "string") {
+    options.readOnly = readOnly === "true";
+  }
+
   if (jsonUrl) {
     const jsonURL = new URL(jsonUrl);
 
     invariant(jsonURL, "url must be a valid URL");
 
-    const doc = await createFromUrl(jsonURL, jsonURL.href, options);
+    const doc = await createFromUrl(jsonURL, title ?? jsonURL.href, options);
 
     context.waitUntil(
       sendEvent({
@@ -49,7 +55,7 @@ export let loader: LoaderFunction = async ({ request, context }) => {
 
   if (base64EncodedJson) {
     const doc = await createFromRawJson(
-      "Untitled",
+      title ?? "Untitled",
       atob(base64EncodedJson),
       options
     );