improvement: add markdown editor

assets/js/app.js

@@ -77,10 +77,46 @@ Hooks.JsonView = {
   }
 }
 
+const init = (element, initialValue) => new EasyMDE({
+  element: element,
+  forceSync: true
+})
+
+Hooks.MarkdownEditor = {
+  mounted() {
+    const id = this.el.getAttribute("data-target-id")
+    const el = document.getElementById(id)
+    init(el)
+  },
+  // updated(){
+  //   console.log(this.el.value)
+  //   const textArea = init(this.el, this.el.value);
+  //   // textArea.codemirror.on("change", ( ) => {
+  //   //   console.log(textArea.value())
+  //   //   // this.pushEventTo(this.el, "")
+  //   // })
+
+  //   // init(document.getElementById(inputId));
+
+  //   // textArea.codemirror.on("change", ( ) => {
+  //   //   this.pushEventTo(
+  //   //     this.el, 
+  //   //     "handle_clientside_richtext",
+  //   //     {richtext_data: textArea.value()}
+  //   //   );
+  //   //   this.handleEvent(
+  //   //     "richtext_event",
+  //   //     (richtext_data) => textArea.value(richtext_data)
+  //   //   )
+  //   // })
+  // }
+}
+
+
+
 Hooks.Actor = {
   mounted() {
     this.handleEvent("set_actor", (payload) => {
-      console.log(payload);
       document.cookie = 'actor_resource' + '=' + payload.resource + ';path=/';
       document.cookie = 'actor_primary_key' + '=' + payload.primary_key + ';path=/';
       document.cookie = 'actor_action' + '=' + payload.action + ';path=/';
@@ -95,7 +131,6 @@ Hooks.Actor = {
       document.cookie = 'actor_paused=true;path=/';
     });
     this.handleEvent("toggle_authorizing", (payload) => {
-      console.log(payload);
       document.cookie = 'actor_authorizing' + '=' + payload.authorizing + ';path=/';
     });
     this.handleEvent("toggle_actor_paused", (payload) => {

assets/package.json

@@ -6,36 +6,33 @@
     "build": "NODE_ENV=production webpack --mode production",
     "watch": "NODE_ENV=production webpack --mode development --watch"
   },
-  "dependencies": {
-    "@tailwindcss/forms": "^0.2.1",
-    "bootstrap": "^4.4.1",
+  "devDependencies": {
+    "@tailwindcss/forms": "^0.5.3",
+    "@tailwindcss/typography": "^0.5.7",
     "nprogress": "^0.2.0",
     "phoenix": "1.6.6",
     "phoenix_html": "3.2.0",
     "phoenix_live_view": "0.17.7",
-    "uplot": "^1.0.11"
-  },
-  "devDependencies": {
+    "tailwindcss": "^3.2.1",
+    "uplot": "^1.0.11",
     "@babel/core": "^7.3.4",
     "@babel/preset-env": "^7.4.1",
     "autoprefixer": "^9.8.8",
+    "postcss-loader": "^7.0.1",
     "babel-loader": "^8.0.6",
     "copy-webpack-plugin": "^6.1.1",
     "css-loader": "^3.4.2",
     "glob": "^7.1.6",
     "jest": "^25.1.0",
-    "mini-css-extract-plugin": "^0.9.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
-    "postcss": "^7.0.39",
-    "postcss-loader": "^3.0.0",
+    "mini-css-extract-plugin": "^2.6.1",
+    "postcss": "^8.4.18",
     "precss": "^4.0.0",
     "sass": "^1.32.13",
     "sass-loader": "^8.0.2",
     "style-loader": "^0.20.2",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
     "terser-webpack-plugin": "^4.2.2",
     "url-loader": "^4.0.0",
-    "webpack": "^4.41.5",
-    "webpack-cli": "^3.3.10"
+    "webpack": "^5.0.0",
+    "webpack-cli": "^4.10.0"
   }
 }

assets/tailwind.config.js

@@ -15,5 +15,6 @@ module.exports = {
   },
   plugins: [
     require('@tailwindcss/forms'),
+    require('@tailwindcss/typography')
   ],
 }

assets/webpack.config.js

@@ -2,13 +2,11 @@ const path = require('path');
 const glob = require('glob');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 
 module.exports = (env, options) => ({
   optimization: {
     minimizer: [
-      new TerserPlugin({ cache: true, parallel: true, sourceMap: false }),
-      new OptimizeCSSAssetsPlugin({})
+      new TerserPlugin({ cache: true, parallel: true, sourceMap: false })
     ]
   },
   entry: {
@@ -42,12 +40,14 @@ module.exports = (env, options) => ({
         }, {
           loader: 'postcss-loader',
           options: {
-            plugins: function () {
-              return [
-                require('precss'),
-                require('autoprefixer'),
-                require('tailwindcss')
-              ];
+            postcssOptions: {
+              plugins: function () {
+                return [
+                  require('precss'),
+                  require('autoprefixer'),
+                  require('tailwindcss')
+                ];
+              }
             }
           }
         }, {

dev/resources/tickets/resources/ticket/ticket.ex

@@ -18,7 +18,7 @@ defmodule Demo.Tickets.Ticket do
     ]
 
     form do
-      field :description, type: :long_text
+      field :description, type: :markdown
     end
   end
 

lib/ash_admin/components/resource/form.ex

@@ -158,8 +158,9 @@ defmodule AshAdmin.Components.Resource.Form do
           :for={attribute <- Enum.reject(attributes, &(&1.name in skip))}
           class={
             "col-span-6",
+            "sm:col-span-full": markdown?(resource, attribute),
             "sm:col-span-2": short_text?(resource, attribute),
-            "sm:col-span-3": !long_text?(resource, attribute)
+            "sm:col-span-3": !(long_text?(resource, attribute) || markdown?(resource, attribute))
           }
         >
           <FieldContext name={attribute.name}>
@@ -502,6 +503,16 @@ defmodule AshAdmin.Components.Resource.Form do
     end
   end
 
+  defp markdown?(resource, attribute) do
+    case AshAdmin.Resource.field(resource, attribute.name) do
+      %{type: :markdown} ->
+        true
+
+      _ ->
+        false
+    end
+  end
+
   defp unwrap_type({:array, type}), do: unwrap_type(type)
   defp unwrap_type(type), do: type
 
@@ -586,6 +597,35 @@ defmodule AshAdmin.Components.Resource.Form do
         />
         """
 
+      markdown?(form.source.resource, attribute) ->
+        ~F"""
+        <div phx-hook="MarkdownEditor"
+        id={form.id <> "_#{attribute.name}_container"}
+        phx-update="ignore"
+        data-target-id={form.id <> "_#{attribute.name}"}
+        class="prose max-w-none"
+        >
+          <textarea
+            id={form.id <> "_#{attribute.name}"}
+            value={value(value, form, attribute) || ""}
+            class="prose max-w-none"
+            name={name || form.name <> "[#{attribute.name}]"}/>
+        </div>
+        """
+
+      # <TextArea
+      #   form={form}
+      #   :props={props(value, attribute)}
+      #   name={name || form.name <> "[#{attribute.name}]"}
+      #   opts={
+      #     type: text_input_type(attribute),
+      #     placeholder: placeholder(default)
+      #     phx_update=
+      #   }
+      #   value={value(value, form, attribute)}
+      #   class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md resize-y"
+      # />
+
       long_text?(form.source.resource, attribute) ->
         ~F"""
         <TextArea

lib/ash_admin/resource/field.ex

@@ -11,7 +11,7 @@ defmodule AshAdmin.Resource.Field do
       doc: "The name of the field to be modified"
     ],
     type: [
-      type: {:in, [:default, :long_text, :short_text]},
+      type: {:in, [:default, :long_text, :short_text, :markdown]},
       required: true,
       doc:
         "The type of the value in the form. Use `default` if you are just specifying field order"

lib/ash_admin/templates/admin.html.eex

@@ -9,6 +9,8 @@
     <style><%= raw(render("app.css")) %></style>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.5.1/jsoneditor.min.css" rel="stylesheet" type="text/css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.5.1/jsoneditor.min.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
+    <script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
   </head>
   <body>
     <%= @inner_content %>