Viewing vs. Editing for a Confluence Macro

Forge
, , ,
1

Is there a way to know which mode the macro is currently in? I’d like to display different components in a macro depending on whether or not the user is editing a confluence page.

1 Like
3

Hi @RossTroha, currently this isn’t possible. Could you let us know your use case for displaying different UI in the edit view and the read view? Will help us to prioritise implementing functionality to enable your use case.

Keep in mind that one of the new Confluence Editor’s design principles is WYSIWYG, which means the edit mode should accurately reflect the view mode as much as possible. If you can think of other ways of achieving your use case, such as through macro configuration, we would love to hear about that too!

4

Ah yes, I think I remember seeing WYSIWYG mentioned in the docs. We’ll do it differently. Thanks for your time!

5

I want to bring up a use case where this principle does not work: exporting. I know currently Forge macros don’t have support for the export format anyway but unless you are planning to drop export support in Confluence I think this should happen in Forge at some point.

As an example our exporter apps (e.g. Scroll PDF Exporter, Scroll Word Exporter, …) provide macros that only output something when exporting and sometimes they don’t even output directly visible content (i.e. a “Page break” macro). These macros do not output anything in the page view but they need to do so in the editor, otherwise users can not see or edit the macro. This was already a problem with Connect macros in the new editor until we got the output.type parameter.

4 Likes
6

I’m tinkering with a demo macro now and trying to make a content-editable macro. Ideally I’d like to create an HTML / Javascript macro that would allow me to embed anything on a page. I have my custom resource set up, but still can’t find any mentioning in the docs of displaying a different ui in the edit view and the read view.

While my reading I also found some issues in this section here:

https://developer.atlassian.com/platform/forge/build-a-custom-ui-app-in-jira/#build-the-content-for-your-custom-ui

I believe it’s skipping a step, should read:

mkdir static
cd static
npx create-react-app hello-world
cd hello-world
npm install
npm run build

I’m eager to hear more about if there are plans to change this functionality for macros, I like the work on macro config, but call me old fashioned, I kind of like editing macros directly.

7

It makes so much sense to make an “edit” screen directly on the page. I know that there is a WYSIWYG attitude to most things, but headlines and TOC is not WYSIWYG. In the end it should be up to the developer.

8

One thing which is frustrating is with very interactive macros, with links, buttons etc.
In edit mode, you see all these buttons, but you can’t click or interact with it.
So, you are always tempted to ‘click’ on things to then notice that it doesn’t work.

So, with other apps in Atlassian Connect, where you can detect edit/preview mode,
we disabled some links/buttons in the edit/preview mode.
In Forge, you can’t do that and we get this frustrating experience in edit mode.

There seems two possible improvements for our macros:

  • We can detect the edit mode and remove/inactive interactive elements.
  • Even better for some of our macros would be if you can interact with it even in edit mode.

Cheers
Roman

5 Likes
9

Hey All,

I’m going to track this here: [FRGE-437] - Ecosystem Jira.

I’d recommend going and voting on the issue to help us prioritize.

2 Likes
10

In the linked issue above it’s mentioned that it is available. But it is not mentioned in the docs or I missed it.
The docs for useProductContext can be found here

Anyway, you can check if your macro is in editing mode like following:

import { render, useProductContext } from '@forge/ui';
type ContextType = ProductContext & {
  extensionContext: {
    isEditing: boolean
  }
}

const App = () => {
  const context = useProductContext() as ContextType;
 return (
  <Text>{context.extensionContext.isEditing ? "Edit mode" : "View mode"}</Text>
 )

export const run = render(
  <Macro
    app={<App />}/>
);

I’ve added a type definition to fix typing. Seems like the type definition in forge.d.ts is incomplete. As ExtenstionContext interface only includes type: string and misses isEditing. I think config type is also missing but not needed in the example.