New topic’s edit area is small for mobile user

Product Support
9

You can try this little script. Add it to your theme or a new component HTML in the Head tab.

It hides the toolbar with the following conditions:

  • Only for new topics / editing topic first post / topic draft
  • Mobile view
  • if the user has no saved preference. [1]

The code doesn’t mess with the user’s preferences.

<script type="text/discourse-plugin" version="0.8">

const { on, observes } = require("discourse-common/utils/decorators");

const serviceComposer = api.container.lookup("service:composer");

function canUpdateToolbar(context) {
  return (
    // New topic / Editing first post / Topic draft 
    context._isNewTopic &&
    // Toolbar is not hidden
    context.showToolbar &&
    // Mobile view only
    context.site.mobileView &&
    // Do not override user's preference
    context.keyValueStore.get("toolbar-enabled") === undefined
  );
}

function updateShowToolBar(value) {
  serviceComposer._wasToolbarEnabled = !value;
  // Hides the toolbar without remembering the state in the user's browser.
  serviceComposer._toolbarEnabled = value;
  // Refresh computed getter
  serviceComposer.notifyPropertyChange("showToolbar");
}

api.modifyClass("component:composer-editor", {
  pluginId: "composer-editor-toolbar",

  @observes("composer.action")
  _composerSwitchAction() {
    // Handles the situation when switching from a reply to a new topic
    // without closing the composer.
    if (canUpdateToolbar(this)) {
      updateShowToolBar(false);
    }
  },

  @on("didInsertElement")
  _composerEditorInit() {
    this.appEvents.one(`${this.composerEventPrefix}:will-open`, () => {
      if (canUpdateToolbar(this)) {
        updateShowToolBar(false);
      }
    });

    this._super(...arguments);
  },

  @on("willDestroyElement")
  _composerClosed() {
    this._super(...arguments);

    // Restores the toolbar if it is manually hidden.
    if (serviceComposer._wasToolbarEnabled) {
      updateShowToolBar(true);
    }
  },
});
</script>

  1. Once a user clicks on the toggle, the browser remembers the state ↩︎