First daft of Trix integration

core/assets/css/app.css

@@ -4,6 +4,74 @@
 
 @tailwind utilities;
 
+@layer base {
+  trix-editor {
+    @apply text-bodylarge font-body w-full border-0;
+  }
+
+  trix-editor h1 {
+    @apply text-title3 font-title3 mb-8;
+  }
+
+  trix-editor a:not(.no-underline) {
+    @apply text-primary underline cursor-pointer;
+  }
+
+  trix-editor a:visited {
+    @apply text-primary;
+  } 
+
+  trix-editor ul {
+    list-style: none; /* Remove default bullets */
+  }
+
+  trix-editor ul li::before {
+    @apply text-tertiary/0;
+    vertical-align: center;
+    content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
+    display: inline-block; /* Needed to add space between the bullet and the text */
+    width: 30px; /* Also needed for space (tweak if needed) */
+    margin-left: 6px; /* Also needed for space (tweak if needed) */
+    background-image: url(../static/images/bullit.svg); 
+    background-size:     10px 10px;
+    background-repeat:   no-repeat;
+    background-position: left center;    
+  }  
+
+  trix-editor ol {
+    list-style: none; 
+    counter-reset: li
+  }
+
+  trix-editor ol li::before {
+    @apply text-primary font-label text-title5;
+    content: counter(li) "."; color: theme('colors.primary');
+    display: inline-block;
+    width: 30px; /* Also needed for space (tweak if needed) */
+    margin-left: 6px; /* Also needed for space (tweak if needed) */
+  }
+
+  trix-editor ol li {
+    counter-increment: li
+  }  
+
+  trix-editor pre {    
+    @apply text-pre font-pre text-grey2 px-4 pt-6 pb-8;
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+    white-space: pre;
+  }
+
+  trix-editor blockquote {
+    border: 0 solid #ccc;
+    border-left-width: 0px;
+    border-left-width: 0.3em;
+    margin-left: 0.3em;
+    padding-left: 0.6em;
+  }
+}
+
 @layer utilities {
   .text-shadow {
     text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
@@ -19,6 +87,8 @@
   }
 }
 
+@import '../node_modules/trix/dist/trix.css';
+
 [x-cloak] {
   display: none !important;
 }

core/assets/js/app.js

@@ -33,6 +33,8 @@ import { Clipboard } from "./clipboard";
 import { DataDonationHook } from "./data_donation_hook";
 import { Port } from "./port";
 
+import Trix from "trix"
+
 window.registerAPNSDeviceToken = registerAPNSDeviceToken;
 
 window.blurHash = () => {

core/assets/package.json

@@ -19,6 +19,7 @@
     "port": "github:eyra/port#v1.0.0",
     "stringify": "^5.2.0",
     "topbar": "^0.1.4",
+    "trix": "^2.0.5",
     "workbox-precaching": "^6.1.5",
     "workbox-routing": "^6.1.5",
     "workbox-strategies": "^6.1.5"

core/assets/tailwind.config.js

@@ -164,6 +164,7 @@ module.exports = {
         hint: ["Finador-LightOblique", "sans-serif"],
         tablehead: ["Finador-Bold", "sans-serif"],
         tablerow: ["Finador-Regular", "sans-serif"],
+        pre: ["Finador-Light", "sans-serif"],
       },
       fontSize: {
         title0: ["64px", "68px"],
@@ -193,6 +194,7 @@ module.exports = {
         hint: ["20px", "24px"],
         tablehead: ["14px", "16px"],
         tablerow: ["14px", "16px"],
+        pre: ["24px", "30px"],
       },
       minWidth: {
         "1/2": "50%",

core/frameworks/pixel/components/form.ex

@@ -337,7 +337,7 @@ defmodule Frameworks.Pixel.Form do
     field_id = String.to_atom(input_id(form, field))
 
     input_static_class =
-      "#{field_tag(@input)} field-input text-grey1 text-bodymedium font-body pl-3 pt-2 w-full h-64 border-2 focus:outline-none rounded"
+      "#{field_tag(@input)} field-input text-grey1 text-bodymedium font-body pl-3 pt-2 w-full border-2 focus:outline-none rounded"
 
     input_dynamic_class = "border-grey3"
     active_color = active_input_color(assigns)
@@ -365,16 +365,26 @@ defmodule Frameworks.Pixel.Form do
       extra_space={false}
     >
       <textarea
+        id={"#{@field_id}_textarea"}
+        name={"#{@field_name}_textarea"}
+        class="hidden"
+        phx-target={@target}
+        phx-debounce={@debounce}
+      ><%= @field_value %></textarea>
+      <div
         id={@field_id}
         name={@field_name}
         class={[@input_static_class, @input_dynamic_class]}
         __eyra_field_id={@field_id}
         __eyra_field_has_errors={@has_errors}
         __eyra_field_static_class={@input_static_class}
         __eyra_field_active_color={@active_color}
-        phx-target={@target}
-        phx-debounce={@debounce}
-      ><%= @field_value %></textarea>
+        phx-update="ignore">
+        <trix-editor
+          phx-debounce={@debounce}
+          input={"#{@field_id}_textarea"}>
+        </trix-editor>
+      </div>
     </.field>
     """
   end