panda_cms 0.2.0

data/lib/generators/panda_cms/install_generator.rb

@@ -0,0 +1,32 @@
+module Generators
+  module PandaCms
+    class InstallGenerator < ::Rails::Generators::Base
+      source_root File.expand_path("templates", __dir__)
+
+      namespace "panda_cms:install"
+      desc "Adds the basic configuration for Panda CMS to your Rails app."
+
+      def create_initializer_file
+        # Add the initializer
+        initializer_path = "config/initializers/panda_cms.rb"
+        unless File.exist?("#{::Rails.root}/#{initializer_path}")
+          FileUtils.cp "#{::PandaCms::Engine.root}/#{initializer_path}", "#{::Rails.root}/#{initializer_path}"
+        end
+
+        # # Add the JavaScript controllers
+        # unless File.exist?("#{::Rails.root}/app/javascript/panda_cms/controllers/editable_controller.js")
+        #   `mkdir -p "#{::Rails.root}/app/javascript/panda_cms/controllers"`
+        #   # FileUtils.cp "#{::PandaCms::Engine.root}/app/assets/javascript/panda_cms/controllers/editable_controller.js", "#{::Rails.root}/app/javascript/panda_cms/controllers/editable_controller.js"
+        #   # `bin/importmap pin tailwindcss-stimulus-components`
+        #   # `bin/importmap pin stimulus-rails-nested-form`
+        # end
+
+        # Add the seed loader to the seeds.rb file
+        unless File.read("#{::Rails.root}/db/seeds.rb")&.include?("PandaCms::Engine.load_seed")
+          existing_seeds = File.read("#{::Rails.root}/db/seeds.rb")
+          IO.write("#{::Rails.root}/db/seeds.rb", "PandaCms::Engine.load_seed\n\n#{existing_seeds}")
+        end
+      end
+    end
+  end
+end

data/lib/panda_cms/engine.rb

@@ -0,0 +1,172 @@
+require "importmap-rails"
+require "paper_trail"
+require "view_component"
+
+require "omniauth"
+require "omniauth/rails_csrf_protection"
+require "omniauth/strategies/microsoft_graph"
+require "omniauth/strategies/google_oauth2"
+require "omniauth/strategies/github"
+
+require "panda_cms/exceptions_app"
+
+module PandaCms
+  class Engine < ::Rails::Engine
+    isolate_namespace PandaCms
+    engine_name "panda_cms"
+
+    attr_accessor :importmap
+
+    config.to_prepare do
+      ApplicationController.helper(::ApplicationHelper)
+    end
+
+    # We rely on ViewComponent here before we can continue
+    config.railties_order = [::ViewComponent::Engine, PandaCms::Engine, :main_app, :all]
+
+    # Set our generators
+    config.generators do |g|
+      g.orm :active_record, primary_key_type: :uuid
+      g.test_framework :rspec, fixture: true
+      g.fixture_replacement :factory_bot, dir: "spec/factories"
+      g.view_specs false
+      g.templates.unshift File.expand_path("../../templates", __FILE__)
+    end
+
+    # Make files in public available to the main app (e.g. favicon.ico)
+    config.app_middleware.use(
+      Rack::Static,
+      urls: ["/panda-cms-assets"],
+      root: PandaCms::Engine.root.join("public")
+    )
+
+    config.exceptions_app = PandaCms::ExceptionsApp.new(exceptions_app: routes)
+
+    # Create an importmap for the engine's JS
+    initializer "panda_cms.importmap", before: "importmap" do |app|
+      map = Importmap::Map.new
+      map.draw(PandaCms::Engine.root.join("config/importmap.rb"))
+      map.cache_sweeper(watches: PandaCms::Engine.root.join("app/javascript"))
+      # TODO: Sort in production?
+      app.config.assets.paths << PandaCms::Engine.root.join("app/javascript") if Rails.env.development?
+      PandaCms::Engine.importmap = map
+      ActiveSupport.on_load(:action_controller_base, run_once: true) do
+        before_action { PandaCms::Engine.importmap.cache_sweeper.execute_if_updated }
+      end
+    end
+
+    # Append routes to the routes file
+    config.after_initialize do |app|
+      app.routes.append do
+        mount PandaCms::Engine => "/", :as => "panda_cms"
+        get "/_maintenance", to: "panda_cms/errors#error_503", as: :panda_cms_maintenance
+        get "/*path", to: "panda_cms/pages#show", as: :panda_cms_page
+        root to: "panda_cms/pages#root"
+      end
+    end
+
+    # Add the migrations to the main app
+    initializer "panda_cms.migrations" do |app|
+      unless app.root.to_s.match root.to_s
+        config.paths["db/migrate"].expanded.each do |expanded_path|
+          app.config.paths["db/migrate"] << expanded_path
+        end
+      end
+    end
+
+    # Set up authentication
+    initializer "panda_cms.omniauth", before: "omniauth" do |app|
+      app.config.session_store :cookie_store, key: "_panda_cms_session"
+      app.config.middleware.use ActionDispatch::Cookies
+      app.config.middleware.use ActionDispatch::Session::CookieStore, app.config.session_options
+
+      OmniAuth.config.logger = Rails.logger
+      auth_path = "#{PandaCms.admin_path}/auth"
+      callback_path = "/callback"
+
+      # TODO: Move this to somewhere more sensible
+      # Define the mapping of our provider "names" to the OmniAuth strategies and configuration
+      available_providers = {
+        microsoft: {
+          strategy: :microsoft_graph,
+          defaults: {
+            name: "microsoft",
+            # Setup at the following URL:
+            # https://portal.azure.com/#view/Microsoft_AAD_RegisteredApps/ApplicationsListBlade
+            client_id: Rails.application.credentials.dig(:microsoft, :client_id),
+            client_secret: Rails.application.credentials.dig(:microsoft, :client_secret),
+            # Don't change this or the sky will fall on your head
+            # https://github.com/synth/omniauth-microsoft_graph/tree/main?tab=readme-ov-file#domain-verification
+            skip_domain_verification: false,
+            # If your application is single-tenanted, replace "common" with your tenant (directory) ID
+            # from https://portal.azure.com/#settings/directory, otherwise you'll likely want to leave
+            # these settings unchanged
+            client_options: {
+              site: "https://login.microsoftonline.com/",
+              token_url: "common/oauth2/v2.0/token",
+              authorize_url: "common/oauth2/v2.0/authorize"
+            },
+            # If you assign specific users or groups, you will likely want to set this to
+            # true to enable auto-provisioning
+            create_account_on_first_login: false,
+            create_admin_account_on_first_login: false
+          }
+        },
+        google: {
+          strategy: :google_oauth2,
+          defaults: {
+            name: "google",
+            # Setup at the following URL: https://console.developers.google.com/
+            client_id: Rails.application.credentials.dig(:google, :client_id),
+            client_secret: Rails.application.credentials.dig(:google, :client_secret),
+            # If you assign specific users or groups, you will likely want to set this to
+            # true to enable auto-provisioning
+            create_account_on_first_login: false,
+            create_admin_account_on_first_login: false,
+            # Options we need
+            scope: "email, profile",
+            image_aspect_ratio: "square",
+            image_size: 150
+          }
+        },
+        github: {
+          strategy: :github,
+          defaults: {
+            # Setup at the following URL: https://github.com/settings/applications/new
+            # In the meantime, as long as you're set to /admin as your login path, you can
+            # use these for a first login
+            client_id: Rails.application.credentials.dig(:github, :client_id) || "Ov23li9k0LpMXtq8FShb",
+            client_secret: Rails.application.credentials.dig(:github, :client_secret) || "659f54cad324a00b19fc4e342cfecc6a0534fa55",
+            name: "github",
+            scope: "user:email,read:user",
+            create_account_on_first_login: false,
+            create_admin_account_on_first_login: false
+          }
+        }
+      }
+
+      available_providers.each do |provider, options|
+        if PandaCms.authentication.dig(provider, :enabled)
+          options[:defaults][:path_prefix] = auth_path
+          options[:defaults][:redirect_uri] = "#{PandaCms.url}#{auth_path}/#{provider}#{callback_path}"
+
+          provider_config = options[:defaults].merge(PandaCms.authentication[provider].except(
+            :enabled,
+            :client_id,
+            :client_secret,
+            :create_account_on_first_login,
+            :create_admin_account_on_first_login
+          ))
+
+          Rails.logger.info("Configuring OmniAuth for #{provider} with #{provider_config}")
+
+          app.config.middleware.use OmniAuth::Builder do
+            provider options[:strategy], provider_config
+          end
+
+          OmniAuth.config.allowed_request_methods = %i[post get] if provider == :google
+        end
+      end
+    end
+  end
+end

data/lib/panda_cms/exceptions_app.rb

@@ -0,0 +1,24 @@
+# https://guides.rubyonrails.org/configuring.html#config-exceptions-app
+module PandaCms
+  class ExceptionsApp
+    def initialize(exceptions_app:)
+      @exceptions_app = exceptions_app
+    end
+
+    def call(env)
+      request = ActionDispatch::Request.new(env)
+
+      fallback_to_html_format_if_invalid_mime_type(request)
+
+      @exceptions_app.call(env)
+    end
+
+    private
+
+    def fallback_to_html_format_if_invalid_mime_type(request)
+      request.formats
+    rescue ActionDispatch::Http::MimeNegotiation::InvalidType
+      request.set_header "CONTENT_TYPE", "text/html"
+    end
+  end
+end

data/lib/panda_cms/version.rb

@@ -0,0 +1,3 @@
+module PandaCms
+  VERSION = "0.2.0"
+end

data/lib/panda_cms.rb

@@ -0,0 +1,14 @@
+require "panda_cms/version"
+require "panda_cms/engine"
+
+module PandaCms
+  mattr_accessor :admin_path
+  mattr_accessor :authentication
+  mattr_accessor :require_login_to_view
+  mattr_accessor :title
+  mattr_accessor :url
+
+  def self.admin_path_symbol
+    @@admin_path.delete_prefix("/")
+  end
+end

data/lib/tasks/panda_cms.rake

@@ -0,0 +1,67 @@
+require "tailwindcss-rails"
+require "shellwords"
+
+ENV["TAILWIND_PATH"] ||= Tailwindcss::Engine.root.join("exe/tailwindcss").to_s
+
+namespace :panda_cms do
+  namespace :assets do
+    desc "Build admin assets for Panda CMS"
+    task :admin do
+      run_tailwind(
+        root_path: PandaCms::Engine.root,
+        input_path: "app/assets/stylesheets/panda_cms/application.tailwind.css",
+        output_path: "app/assets/builds/panda_cms.css"
+      )
+    end
+
+    desc "Build dummy assets for Panda CMS"
+    task :dummy do
+      run_tailwind(
+        root_path: Rails.application.root,
+        input_path: "app/assets/stylesheets/application.tailwind.css",
+        output_path: "app/assets/builds/application.css",
+        config_path: "config/tailwind.config.js"
+      )
+    end
+
+    desc "Watch admin assets for Panda CMS"
+    task :watch_admin do
+      run_tailwind(
+        root_path: PandaCms::Engine.root,
+        input_path: "app/assets/stylesheets/panda_cms/application.tailwind.css",
+        output_path: "app/assets/builds/panda_cms.css",
+        watch: true
+      )
+    end
+
+    desc "Watch dummy assets for Panda CMS"
+    task :watch_dummy do
+      run_tailwind(
+        root_path: Rails.application.root,
+        input_path: "app/assets/stylesheets/application.tailwind.css",
+        output_path: "app/assets/builds/application.css",
+        config_path: "config/tailwind.config.js",
+        watch: true
+      )
+    end
+  end
+end
+
+task default: [:spec, :panda_cms]
+
+def run_tailwind(root_path:, input_path: nil, output_path: nil, config_path: nil, watch: false)
+  Rails.logger = Logger.new($stdout)
+  config_path ||= root_path.join("config/tailwind.config.js")
+
+  command = [
+    ENV["TAILWIND_PATH"],
+    "-i #{root_path.join(input_path)}",
+    "-o #{root_path.join(output_path)}",
+    "-c #{root_path.join(config_path)}",
+    "-m"
+  ]
+
+  command << "-w" if watch
+
+  exec command.join(" ")
+end

data/lib/templates/erb/scaffold/_form.html.erb.tt

@@ -0,0 +1,43 @@
+<%%= form_with(model: <%= model_resource_name %>, class: "contents") do |form| %>
+  <%% if <%= singular_table_name %>.errors.any? %>
+    <div id="error_explanation" class="py-2 px-3 mt-3 font-medium text-red-500 bg-red-50 rounded-lg">
+      <h2><%%= pluralize(<%= singular_table_name %>.errors.count, "error") %> prohibited this <%= singular_table_name %> from being saved:</h2>
+
+      <ul>
+        <%% <%= singular_table_name %>.errors.each do |error| %>
+          <li><%%= error.full_message %></li>
+        <%% end %>
+      </ul>
+    </div>
+  <%% end %>
+
+<% attributes.each do |attribute| -%>
+  <div class="my-5">
+<% if attribute.password_digest? -%>
+    <%%= form.label :password %>
+    <%%= form.password_field :password, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
+</div>
+
+<div class="my-5">
+    <%%= form.label :password_confirmation %>
+    <%%= form.password_field :password_confirmation, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
+<% elsif attribute.attachments? -%>
+    <%%= form.label :<%= attribute.column_name %> %>
+    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, multiple: true, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
+<% else -%>
+    <%%= form.label :<%= attribute.column_name %> %>
+<% if attribute.field_type == :text_area -%>
+    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, rows: 4, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
+<% elsif attribute.field_type == :check_box -%>
+    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: "block mt-2 h-5 w-5" %>
+<% else -%>
+    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
+<% end -%>
+<% end -%>
+  </div>
+
+<% end -%>
+  <div class="inline">
+    <%%= form.submit class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
+  </div>
+<%% end %>

data/lib/templates/erb/scaffold/edit.html.erb.tt

@@ -0,0 +1,8 @@
+<div class="mx-auto w-full md:w-2/3">
+  <h1 class="text-4xl font-bold">Editing <%= human_name.downcase %></h1>
+
+  <%%= render "form", <%= singular_table_name %>: @<%= singular_table_name %> %>
+
+  <%%= link_to "Show this <%= human_name.downcase %>", @<%= singular_table_name %>, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+  <%%= link_to "Back to <%= human_name.pluralize.downcase %>", <%= index_helper %>_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+</div>

data/lib/templates/erb/scaffold/index.html.erb.tt

@@ -0,0 +1,14 @@
+<div class="w-full">
+  <%% if notice.present? %>
+    <p class="inline-block py-2 px-3 mb-5 font-medium text-green-500 bg-green-50 rounded-lg" id="notice"><%%= notice %></p>
+  <%% end %>
+
+  <div class="flex justify-between items-center">
+    <h1 class="text-4xl font-bold"><%= human_name.pluralize %></h1>
+    <%%= link_to "New <%= human_name.downcase %>", new_<%= singular_route_name %>_path, class: "rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium" %>
+  </div>
+
+  <div id="<%= plural_table_name %>" class="min-w-full">
+    <%%= render @<%= plural_table_name %> %>
+  </div>
+</div>

data/lib/templates/erb/scaffold/new.html.erb.tt

@@ -0,0 +1,7 @@
+<div class="mx-auto w-full md:w-2/3">
+  <h1 class="text-4xl font-bold">New <%= human_name.downcase %></h1>
+
+  <%%= render "form", <%= singular_table_name %>: @<%= singular_table_name %> %>
+
+  <%%= link_to "Back to <%= human_name.pluralize.downcase %>", <%= index_helper %>_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+</div>

data/lib/templates/erb/scaffold/partial.html.erb.tt

@@ -0,0 +1,22 @@
+<div id="<%%= dom_id <%= singular_name %> %>">
+<% attributes.reject(&:password_digest?).each do |attribute| -%>
+  <p class="my-5">
+    <strong class="block mb-1 font-medium"><%= attribute.human_name %>:</strong>
+<% if attribute.attachment? -%>
+    <%%= link_to <%= singular_name %>.<%= attribute.column_name %>.filename, <%= singular_name %>.<%= attribute.column_name %> if <%= singular_name %>.<%= attribute.column_name %>.attached? %>
+<% elsif attribute.attachments? -%>
+    <%% <%= singular_name %>.<%= attribute.column_name %>.each do |<%= attribute.singular_name %>| %>
+      <div><%%= link_to <%= attribute.singular_name %>.filename, <%= attribute.singular_name %> %></div>
+    <%% end %>
+<% else -%>
+    <%%= <%= singular_name %>.<%= attribute.column_name %> %>
+<% end -%>
+  </p>
+
+<% end -%>
+  <%% if action_name != "show" %>
+    <%%= link_to "Show this <%= human_name.downcase %>", <%= singular_name %>, class: "rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+    <%%= link_to "Edit this <%= human_name.downcase %>", edit_<%= singular_name %>_path(<%= singular_name %>), class: "rounded-lg py-3 ml-2 px-5 bg-gray-100 inline-block font-medium" %>
+    <hr class="mt-6">
+  <%% end %>
+</div>

data/lib/templates/erb/scaffold/show.html.erb.tt

@@ -0,0 +1,15 @@
+<div class="flex mx-auto w-full md:w-2/3">
+  <div class="mx-auto">
+    <%% if notice.present? %>
+      <p class="inline-block py-2 px-3 mb-5 font-medium text-green-500 bg-green-50 rounded-lg" id="notice"><%%= notice %></p>
+    <%% end %>
+
+    <%%= render @<%= singular_table_name %> %>
+
+    <%%= link_to "Edit this <%= singular_table_name %>", edit_<%= singular_table_name %>_path(@<%= singular_table_name %>), class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+    <div class="inline-block ml-2">
+      <%%= button_to "Destroy this <%= singular_table_name %>", <%= singular_table_name %>_path(@<%= singular_table_name %>), method: :delete, class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 font-medium" %>
+    </div>
+    <%%= link_to "Back to <%= plural_table_name %>", <%= index_helper %>_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+  </div>
+</div>

data/public/panda-cms-assets/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/panda-cms-assets/mstile-150x150.png"/>
+            <TileColor>#b91d47</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

data/public/panda-cms-assets/editable.js

@@ -0,0 +1,212 @@
+/**
+ * Represents a controller for managing editable content within an iframe.
+ * @class
+ */
+class EditableController {
+  /**
+   * Represents the constructor for the Editable class.
+   * @param {HTMLIFrameElement} frame - The iFrame element to be used for editing.
+   */
+  constructor(pageId, frame) {
+    this.pageId = pageId;
+    this.frame = frame;
+    this.frame.style.display = "none";
+    this.csrfToken = document.querySelector('meta[name="csrf-token"]').content;
+
+    this.frame.addEventListener("load", () => {
+      this.frameDocument =
+        this.frame.contentDocument || this.frame.contentWindow.document;
+      this.body = this.frameDocument.body;
+      this.head = this.frameDocument.head;
+      this.loadEvents();
+    });
+  }
+
+  /**
+   * Load events for the editable iFrame
+   */
+  loadEvents() {
+    console.debug("[Panda CMS] iFrame loaded...");
+    this.embedExternalResources();
+    this.styleEditableElements();
+  }
+
+  embedExternalResources() {
+    this.addStylesheet(
+      this.frameDocument,
+      this.head,
+      "https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.bubble.css"
+    )
+      .then(() => {
+        return this.loadScript(
+          this.frameDocument,
+          this.head,
+          "https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"
+        );
+      })
+      .then(() => {
+        return this.loadScript(
+          this.frameDocument,
+          this.head,
+          "https://unpkg.com/quill-image-compress@1.2.11/dist/quill.imageCompressor.min.js"
+        );
+      })
+      .then(() => {
+        return this.loadScript(
+          this.frameDocument,
+          this.head,
+          "https://unpkg.com/quill-magic-url@3.0.0/dist/index.js"
+        );
+      })
+      .then(() => {
+        return this.loadScript(
+          this.frameDocument,
+          this.head,
+          "https://cdn.jsdelivr.net/npm/quill-markdown-shortcuts@latest/dist/markdownShortcuts.js"
+        );
+      })
+      .then(() => {
+        console.debug(
+          "[Panda CMS] Dispatching event: pandaCmsExternalResourcesLoaded"
+        );
+
+        // Let the parent know that the external resources have been loaded
+        this.frameDocument.dispatchEvent(
+          new Event("pandaCmsExternalResourcesLoaded")
+        );
+
+        // Autosave the editable elements
+        this.autosaveElements();
+
+        // This prevents the flash of content before the iFrame is ready
+        this.frame.style.display = "";
+      });
+  }
+
+  /**
+   * Autosave the editable elements in the iFrame
+   * @todo #TODO Only do this when we have "autosave" mode enabled?
+   */
+  autosaveElements() {
+    // Grab each element that's editable and append a save handler to it
+    var elements = this.frameDocument.querySelectorAll(".ql-editor");
+    elements.forEach((element) => {
+      element.addEventListener("blur", (event) => {
+        var target = event.target;
+        var blockContentId = target.parentElement.getAttribute(
+          "data-block-content-id"
+        );
+
+        this.bindSaveHandler(blockContentId, target.innerHTML);
+      });
+    });
+  }
+
+  /**
+   * Styles the editable elements in the iFrame
+   */
+  styleEditableElements() {
+    var style = this.frameDocument.createElement("style");
+    style.innerHTML = `.ql-container,
+    .ql-editor, .ql-editor * {
+      margin: inherit !important;
+      padding: inherit !important;
+      font-size: inherit !important;
+      line-height: inherit !important;
+      font-family: inherit !important;
+    }
+
+    .ql-toolbar {
+      background-color: #282e3270;
+      border-radius: 10px;
+    }
+
+    .ql-editor:hover, .ql-container:hover {
+      cursor: pointer !important;
+    }
+
+    .ql-editor:hover, .ql-editor:focus, .ql-editor:active {
+      background-color: #e1effa;
+      cursor: pointer !important;
+      font-size: inherit !important;
+      -webkit-transition: background-color 500ms linear;
+      -ms-transition: background-color 500ms linear;
+      transition: background-color 500ms linear;
+    }
+
+    .ql-editor.success {
+      background-color: #66bd6a50 !important;
+      -webkit-transition: background-color 1000ms linear;
+      -ms-transition: background-color 1000ms linear;
+      transition: background-color 1000ms linear;
+    }
+
+    .ql-tooltip {
+      z-index: 999;
+      min-width: 90vw;
+    }`;
+
+    this.head.append(style);
+  }
+
+  bindSaveHandler(blockContentId, content) {
+    console.debug(`[Panda CMS] Calling save handler for ${blockContentId}...`);
+    fetch(`/admin/pages/${this.pageId}/block_contents/${blockContentId}`, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+        "X-CSRF-Token": this.csrfToken,
+      },
+      body: JSON.stringify({ content: content }),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        var editableBlock = this.frameDocument.querySelector(
+          `[data-block-content-id="${blockContentId}"] .ql-editor`
+        );
+        editableBlock.classList.add("success");
+        setTimeout(() => {
+          editableBlock.classList.remove("success");
+        }, 1500);
+      })
+      .catch((error) => {
+        console.log(error);
+        alert("Error updating. Please contact the support team!", error);
+      });
+  }
+
+  addStylesheet(frameDocument, head, href) {
+    return new Promise(function (resolve, reject) {
+      let link = frameDocument.createElement("link");
+      link.rel = "stylesheet";
+      link.href = href;
+      link.media = "none";
+      head.append(link);
+
+      link.onload = () => {
+        if (link.media != "all") {
+          link.media = "all";
+        }
+        console.debug(`[Panda CMS] Stylesheet loaded: ${href}`);
+        resolve(link);
+      };
+      link.onerror = () =>
+        reject(new Error(`[Panda CMS] Stylesheet load error for ${href}`));
+    });
+  }
+
+  loadScript(frameDocument, head, src) {
+    return new Promise(function (resolve, reject) {
+      let script = frameDocument.createElement("script");
+      script.src = src;
+      head.append(script);
+
+      script.onload = () => {
+        console.debug(`[Panda CMS] Script loaded: ${src}`);
+        resolve(script);
+      };
+      script.onerror = () =>
+        reject(new Error(`[Panda CMS] Script load error for ${src}`));
+    });
+  }
+}