docbrown/app/views/articles/_v2_form.html.erb

<style>
  body {
    padding-top: 0 !important;
  }

  /* This weirdness below has a reason: https://github.com/forem/forem/pull/11701#issuecomment-737319289 */

  .crayons-header,
  .crayons-header * {
    visibility: hidden;
    position: absolute;
    left: -9999em;
    top: -9999em;
    pointer-events: none;
    opacity: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .crayons-header .site-logo,
  .crayons-header .site-logo * {
    visibility: visible;
    position: static;
    pointer-events: auto;
    opacity: 1;
    clip: auto;
    overflow: visible;
  }

  .crayons-footer {
    display: none;
  }

  .wrapper {
    overflow: unset;
  }
</style>

<main id="main-content"
  data-article="<%= article.to_json(only: %i[id title cached_tag_list published published_at body_markdown main_image organization_id canonical_url updated_at], methods: %i[series all_series]) %>"
  data-organizations="<%= organizations&.to_json(only: %i[id name bg_color_hex text_color_hex], methods: [:profile_image_90]) %>"
  data-version="<%= version %>"
  data-site-logo='<%= render "layouts/logo" %>'
  data-scheduling-enabled="<%= FeatureFlag.enabled?(:schedule_articles) %>">
  <form class="crayons-article-form crayons-article-form--<%= version %>">

    <div class="crayons-article-form__header">
      <span class="crayons-article-form__logo">
        <%= render "layouts/logo" %>
      </span>

      <div class="crayons-field__label">
        <span class="hidden s:inline-block mr-2"><%= t("views.editor.create") %></span>
        <% if organizations && organizations.size > 0 %>
          <select name="article[organization_id]" id="article_publish_under_org" class="crayons-select w-auto mt-0">
            <%= options_for_select({ "Personal" => "" }.merge(organizations.pluck(:name, :id).to_h), article.organization_id || "") %>
          </select>
        <% end %>
      </div>

      <nav class="crayons-article-form__tabs crayons-tabs ml-auto" aria-label="<%= t("views.editor.modes") %>">
        <ul class="crayons-tabs__list">
          <li>
            <button data-text="Edit" class="crayons-tabs__item crayons-tabs__item--current" type="button" aria-current="page"><%= t("views.editor.edit") %></button>
          </li>
          <li>
            <button data-text="Preview" class="crayons-tabs__item " type="button"><%= t("views.editor.preview") %></button>
          </li>
        </ul>
      </nav>

      <div class="crayons-article-form__close">
        <a href="/" class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon" title="<%= t("views.editor.close.title") %>">
          <%= crayons_icon_tag(:x, title: t("views.editor.close.icon")) %>
        </a>
      </div>
    </div>

    <div class="crayons-card crayons-article-form__content">
      <% if version == "v2" %>
        <div class="text-padding">
          <div class="crayons-article-form__cover" role="presentation">
            <% if article.main_image.present? %>
              <img src="<%= article.main_image %>" width="250" height="105" alt="Post cover" class="crayons-article-form__cover__image">
            <% end %>
            <button class="crayons-btn crayons-btn--outlined mr-2">
              <label for="cover-image-input">
                <% if article.main_image.present? %><%= t("views.editor.cover_image.change") %><% else %><%= t("views.editor.cover_image.add") %><% end %>
              </label>
              <input id="cover-image-input" type="file" accept="image/*" class="w-100 h-100 absolute left-0 right-0 top-0 bottom-0 overflow-hidden opacity-0 cursor-pointer" data-max-file-size-mb="25">
            </button>
          </div>
          <div class="crayons-article-form__title">
            <textarea class="crayons-textfield crayons-textfield--ghost fs-3xl m:fs-4xl l:fs-5xl fw-bold s:fw-heavy lh-tight" type="text" id="article-form-title" placeholder="<%= t("views.editor.new_title") %>" autocomplete="off"><%= article.title %></textarea>
          </div>
        </div>
      <% end %>
    </div>
  </form>
</main>

<div class="hidden">
  <%= render "pages/editor_markdown_help" %>
  <%= render "pages/editor_liquid_help" %>
  <%= render "pages/editor_frontmatter_help" %>
</div>

<script>
  <%== RunkitTag.script %>
</script>